如何正确配置Angular模板驱动表单，同时实现双向绑定与验证？

当然可行！你遇到的错误完全是因为模板引用变量和双向绑定的组件属性重名导致的——Angular会把模板变量（#city="ngModel"）当成双向绑定的赋值目标，但模板变量是只读的，所以才会抛出Cannot assign value "$event" to template variable "city"的错误。咱们一步步来修正：

核心问题分析 #

你原来的代码里，[(ngModel)]="city"是绑定到组件类的city属性，而#city="ngModel"是创建了一个指向该表单控件的模板引用变量，两者同名就会让Angular混淆，把模板变量当成了要赋值的对象，自然报错。

正确配置步骤 #

1. 确保基础配置到位 #

首先确认你的AppModule（或当前组件所在的模块）已经导入了FormsModule——这是模板驱动表单的基础：

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

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

2. 组件类声明绑定属性 #

在你的组件类里，明确声明要双向绑定的属性（比如city）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-personal-form',
  templateUrl: './personal-form.component.html'
})
export class PersonalFormComponent {
  // 初始化属性，避免undefined
  city: string = '';

  onSubmit(personalDetails: any) {
    console.log('表单提交值:', personalDetails.value);
    console.log('双向绑定同步的city值:', this.city);
  }
}

3. 模板修正：避免变量名冲突 #

把模板引用变量改成和组件属性不同的名字（比如#cityCtrl="ngModel"），同时保留双向绑定、name属性（模板驱动表单必须用name来跟踪控件）和验证规则：

<form (ngSubmit)="onSubmit(personalDetails)" #personalDetails="ngForm">
  <div class="form-group col-md-3 mr-3">
    <label 
      [class.error-label]="!cityCtrl.valid && cityCtrl.touched" 
      for="city"
    >
      City or Town*
    </label>
    <input 
      type="text" 
      id="city" 
      name="city"  <!-- 必须设置name，与组件属性名一致更佳 -->
      required 
      #cityCtrl="ngModel"  <!-- 模板引用变量名与组件属性city区分开 -->
      [(ngModel)]="city"  <!-- 双向绑定到组件的city属性 -->
    />
    <span *ngIf="!cityCtrl.valid && cityCtrl.touched" class="error-text">
      Please enter your City or Town
    </span>
  </div>
  <button type="submit">提交</button>
</form>

为什么之前重命名后值为undefined？ #

你提到把#city="ngModel"改成#cityWhatever="ngModel"后，提交时city值为undefined，大概率是这两个原因之一：

• 组件类里没有声明city属性，导致双向绑定没有目标，表单提交时自然拿不到值；
• 可能不小心修改了name属性，导致表单控件的name和组件属性名不匹配，form.value里的键是name的值，所以要确保name="city"和组件属性city一致。

总结 #

模板驱动表单完全可以同时实现双向绑定和模板驱动验证，核心注意点：

• 模板引用变量名不能和双向绑定的组件属性名重名；
• 必须导入FormsModule；
• 表单控件必须设置name属性；
• 组件类要提前声明绑定的属性并初始化。

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