我表单中的字段未绑定到 Angular 中的模型属性

Question

我正在学习 Angular。我的表单没有将输入字段绑定到模型属性。

我有一个角色形式和一个角色模型。我已在 app.module.ts 中导入 FormsModule，但仍然没有。提交表单工作正常，但表单中的数据未绑定到模型。我什至检查了从表单提交的角色对象，但它显示模型属性为空。

任何帮助将不胜感激。

export class Role {
    id: string;
    createdAt: Date;
    createdBy: string;
    modifiedAt: Date;
    modifiedBy: string;
    code: string;
    role: string;
    description: string;
}

import { Component} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { RoleService } from '../../service/role/role.service';
import { Role } from '../../model/role';

@Component({
  selector: 'app-role-form',
  templateUrl: './role-form.component.html',
  styleUrls: ['./role-form.component.css']
})
export class RoleFormComponent{

  role: Role;

  constructor(private route: ActivatedRoute, private router: Router, private roleService: RoleService) {
    this.role = new Role();
  }

  submitRole(){
    console.log(this.role);
    this.roleService.save(this.role).subscribe(result => this.gotoRoleList());
  }

  gotoRoleList(){
    this.router.navigate(['/roles']);
  }
}

<div class="card my-5">
  <div class="card-body">
    <form (ngSubmit)="submitRole()" #roleForm="ngForm">
      <div class=form-group>
          <label for="code">Name</label>
          <input type="text" [(ngModel)]="role.code"
            class="form-control" id="code" name="code" placeholder="Enter your code"
            required #code="ngModel">
        </div>
      <div [hidden]="!code.pristine" class="alert alert-danger">Name is required</div>
      <div class="form-group">
        <label for="role">Role</label>
        <input type="text" [(ngModel)]="role.role" 
          class="form-control" id="role" name="role" placeholder="Enter role"
          required #role="ngModel">
        <div [hidden]="!role.pristine" class="alert alert-danger">Role is required</div>
      </div>
      <div class="form-group">
        <label for="description">Description</label>
        <textarea [(ngModel)]="role.description" 
          class="form-control" id="description" name="description" placeholder="Enter description"
          cols="30" rows="10" #description="ngModel"></textarea>
      </div>
      <button type="submit" [disabled]="!roleForm.form.valid" class="btn btn-info">Submit</button>
    </form>
  </div>
</div>

import { NgModule } from '@angular/core';
import { Routes, RouterModule} from '@angular/router';
import { RoleListComponent } from './view/role-list/role-list.component';
import { RoleFormComponent } from './form/role-form/role-form.component';

const routes: Routes = [
    { path: 'roles', component: RoleListComponent },
    { path: 'addrole', component: RoleFormComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { RoleListComponent } from './view/role-list/role-list.component';
import { RoleFormComponent } from './form/role-form/role-form.component';
import { RoleService } from './service/role/role.service';

@NgModule({
  declarations: [
    AppComponent,
    RoleListComponent,
    RoleFormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [RoleService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您将角色输入控件命名为与组件内的字段相同：

<input type="text" [(ngModel)]="role.role" 
       class="form-control" id="role" name="role" placeholder="Enter role"
       required #role="ngModel">

注意#role="ngModel"。控件名称在模板中优先，所以当您在 HTML 模板中使用 role 字段时，实际上您指的是控件本身。

要解决此问题，您只需将#role="ngModel" 更改为#roleControl="ngModel"。另外不要忘记更新字段验证：

<div [hidden]="!roleControl.pristine" class="alert alert-danger">Role is required</div>