尽管导入FormsModule,但Angular 9抛出“无法绑定到'ngModel',因为它不是'input'的已知属性”错误

问题描述 投票:0回答:1

我正在尝试在Angular 9中创建登录表单。我知道这是Angular中的常见问题,这是因为FormsModule并未导入@NgModule中

但是,我已经导入了FormsModule和ReactiveFormsModule,但是并没有解决我的问题

//from app.module.ts
@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        ForumComponent,
        PostComponent,
        UserComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MaterialModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent],
})

以下是我的login.component.html文件中表单的HTML

<form class="box" action="" #loginForm="ngForm" (ngSubmit)="login()">
    <div class="field">
        <label for="" class="label">Email</label>
        <div class="control has-icons-left">
            <input type="email" 
                    placeholder="e.g. [email protected]" 
                    class="input" 
                    [(ngModel)] = "model.email"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-envelope"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="label">Password</label>
        <div class="control has-icons-left">
            <input type="password" 
                    placeholder="*******" 
                    class="input"
                    [(ngModel)] = "model.password"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-lock"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="checkbox">
            <input type="checkbox" />
            Remember me
        </label>
    </div>
    <div class="field">
        <button class="button is-success" [disabled]="!loginForm.valid">
            Login
        </button>
    </div>
</form>

如果需要,我可以共享我的login.component.ts的代码,但是Angular编译器当前抛出的所有错误都引用了登录组件html文件中的问题。谢谢

javascript angular angular-ngmodel
1个回答
0
投票

与ngModel一起使用已弃用,请检查official docs了解详细信息

© www.soinside.com 2019 - 2024. All rights reserved.