Angular 14/Material表单属性绑定失败问题求助

核心问题及修复步骤 #

• 为ngModel绑定的输入框添加name属性：Angular模板驱动表单要求，使用[(ngModel)]的表单控件必须指定name属性，否则双向绑定机制无法正常生效。
• 确保模块导入FormsModule：在组件所属的NgModule中导入FormsModule，这是使用ngModel的必要前提。
• 修复提交按钮的事件绑定：编辑模式下的Submit按钮未绑定addDepartment()方法，点击无法触发提交逻辑。

修正后的模板代码 #

<h2 mat-dialog-title>{{ModalTitle}}</h2>
<ng-container *ngIf="DepartmentId === 0">
  <form name="add">
    <mat-dialog-content class="mat-typography" id="add-edit-modal">
      <input type="text" placeholder="Department Name" [(ngModel)]="DepartmentName" name="departmentName"/>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button mat-dialog-close>Cancel</button>
      <button mat-button [mat-dialog-close]="true" type="button" name="add" cdkFocusInitial (click)="addDepartment()">Add</button>
    </mat-dialog-actions>
  </form>
</ng-container>
<ng-container *ngIf="DepartmentId !== 0">
  <mat-dialog-content class="mat-typography" id="add-edit-modal">
    <form name="add">
      <input type="text" placeholder="Department Name" [(ngModel)]="DepartmentName" name="departmentName"/>
    </form>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button [mat-dialog-close]="true" cdkFocusInitial (click)="addDepartment()">Submit</button>
  </mat-dialog-actions>
</ng-container>

模块导入FormsModule示例 #

在组件所属的模块文件（如app.module.ts）中添加：

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

@NgModule({
  imports: [
    // ...其他导入项
    FormsModule
  ],
  // ...其他配置
})
export class AppModule { }

额外说明 #

• 无需使用ngOnChanges监听输入值变化，双向绑定正常工作时，DepartmentName会自动同步输入框内容。
• 编辑模式下的表单不需要onsubmit="addDepartment()"，通过按钮的(click)事件触发提交更符合Angular开发逻辑。

内容的提问来源于stack exchange，提问作者Morgan Bradford