角DataBinding

Question

我得到了错误没有指令找到导出为ngForm

我的app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';

我的进口品

 imports: [ReactiveFormsModule,CommonModule,FormsModule]

LoginComponent.html

  <div class="row w-100 mx-0">
    <div class="col-lg-4 mx-auto">
      <div class="auth-form-light text-left py-5 px-4 px-sm-5">
        <div class="brand-logo">
          <img src="assets/images/logo.png" alt="logo">
        </div>
       <form class="pt-3" #f="ngForm" (ngSubmit)="onSubmit(f)" >
          <div class="form-group">
            <input type="email" class="form-control form-control-lg" id="userId"  name="userId" placeholder="LogIn ID" ngModel>
          </div>
          <div class="form-group">
            <input type="password" class="form-control form-control-lg" id="userName"  name="userPassword" placeholder="Password" ngModel>
          </div>
          <div class="mt-3">
            <button type="submit" class="btn btn-gradient-light btn-rounded btn-fw btn-lg" routerLink="/dashboard">Log In</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div> 

LoginComponent.ts ngForm是导入的，但我得到的错误是导入是必需的，formsModule和NgForm是导入的，并且在npm启动时得到了错误。

     import{NgForm} from '@angular/forms';
     import { FormsModule } from '@angular/forms';

    arr: any[]=[];    
    onSubmit(form : NgForm) {
      this.arr = form.value
      console.log(JSON.stringify(this.arr))
     }

Answer 1

试着按顺序导入它们，如BrowserModule，、、FormsModule、和ReactiveFormsModule.角编译器将按照我们在模块类导入数组中提到的顺序(如果我错了，请纠正我)。

因此，导入顺序应该从基本模块到功能模块。

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule     
  ],
  providers: [],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

你也可以在这个答案中看到类似的问题。

• https://stackoverflow.com/a/57849112/9764133