Angular 7 Crud webAPI->添加#form后编译错误答案

【问题标题】：Angular 7 Crud webAPI -> compilation error after adding #formAngular 7 Crud webAPI->添加#form后编译错误
【发布时间】：2021-07-02 12:44:15
【问题描述】：

您好，我的项目有问题，在我像这样添加到 employee.component.html 表单之前一切正常：

    <form #form="formData">
        <div class="form-group">
            <label>FULL NAME</label>
            <input name="FullName" #FullName="ngModule" [(ngModule)]="service.formData.FullName" class="form-control">
        </div>
    </form>

5 月 localhost 之后，我看到错误“提交编译”

这是我的 app.module.ts


    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { ReactiveFormsModule } from '@angular/forms';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AppComponent } from './app.component';
    import { EmpolyeesComponent } from './empolyees/empolyees.component';
    import { EmpolyeeComponent } from './employees/empolyee/empolyee.component';
    import { EmpolyeeListComponent } from './employees/empolyee-list/empolyee-list.component';
    import { EmpolyeeService } from './shared/empolyee.service';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    
    @NgModule({
      declarations: [
        AppComponent,
        EmpolyeesComponent,
        EmpolyeeComponent,
        EmpolyeeListComponent
      ],
      imports: [
        CommonModule,
        FormsModule,
        BrowserModule,
        NgbModule,
        ReactiveFormsModule
      ],
      providers: [EmpolyeeService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

这是employee.component.ts


    import { Component, OnInit } from '@angular/core';
    import { EmpolyeeService } from 'src/app/shared/empolyee.service';
    
    @Component({
      selector: 'app-empolyee',
      templateUrl: './empolyee.component.html',
      styleUrls: ['./empolyee.component.css']
      
    })
    export class EmpolyeeComponent implements OnInit {
    
      constructor(public service : EmpolyeeService) { }
    
      ngOnInit(): void {
      }
    
    }

请大家帮忙！谢谢！

【问题讨论】：

错别字...您在模板中的两个地方使用ngModule...应该是ngModel
omg.. 真是个错误。非常感谢！

标签： angular asp.net-web-api angular7 webapi

【解决方案1】：

我可以建议为您的表单使用另一种方法，使用 formBuilder。在employee.component.html使用

<form [formGroup]="customGroup">
  <div class="form-group">
     <label>FULL NAME</label>
     <input formControlName="username" class="form-control">
  </div>
</form>

然后像这样修改你的组件

import { Component, OnInit } from '@angular/core';
import { EmpolyeeService } from 'src/app/shared/empolyee.service';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-empolyee',
  templateUrl: './empolyee.component.html',
  styleUrls: ['./empolyee.component.css']
  
})
export class EmpolyeeComponent implements OnInit {
  public customGroup: FormGroup;

  constructor(public service : EmpolyeeService, private formBuilder: FormBuilder) { 
     this.customGroup = this.formBuilder.group({
       username: ['', []],
     });
  }

  ngOnInit(): void {
  }
}

希望对你有帮助。

【讨论】：