Angular单选元素中ngModel与formControlName的行为差异问题

我在分别使用模板驱动表单（template-driven-form）和响应式表单（model-driven-form）对同一组单选输入元素做验证时遇到了如下问题：模板驱动表单使用ngModel绑定时，3个单选元素仅对应1个控件实例；而响应式表单使用formControlName绑定时，3个单选元素对应了3个独立的控件实例。

相关代码如下：

模板代码 #

<!-- template-driven-form.component.html -->
<div class="form-group gender">
  <label for="gender">Select Gender:</label>
  <div class="radio" *ngFor="let gender of genders">
    <input type="radio" name="gender" [value]="gender" ngModel appFormControlValidation validationMsgId="gender" required />
    <label>{{ gender }}</label>
  </div>
</div>

<!-- model-driven-form.component.html -->
<div class="form-group gender">
  <label for="gender">Select Gender:</label>
  <div class="radio" *ngFor="let gender of genders">
    <input type="radio" name="gender" [value]="gender" formControlName="gender" appFormControlValidation validationMsgId="gender" required />
    <label>{{ gender }}</label>
  </div>
</div>

逻辑代码 #

// model-driven-form.component.ts
genders: string[] = ['Male', 'Female', 'Other'];
this.modelForm = new FormGroup({
  gender: new FormControl(null, [Validators.required])
});

// template-driven-form.component.ts
genders: string[] = ['Male', 'Female', 'Other'];

// form-control-directive 核心逻辑
(this.control as NgControl).statusChanges.subscribe(
  // 模板表单场景：3个单选元素仅触发1次实例回调
  // 响应式表单场景：3个单选元素触发3次不同实例的回调
);

两种表单使用的HTML结构完全一致，但生成的控件实例数量存在差异。这导致的问题是：触发验证时，模板驱动表单仅弹出1次错误提示（符合预期），但响应式表单会同时弹出3次错误提示。

待解答问题 #

1. 为什么对同一组单选元素，ngModel和formControlName生成的控件实例数量存在差异？
2. 需要做什么修改才能让formControlName绑定的单选组也仅生成1个控件实例？

问题解答 #

1. 控件实例数量差异的原因 #

模板驱动表单的NgModel指令在处理同name属性的单选组时，内部做了实例复用逻辑：同一个name下的所有单选输入只会绑定同一个FormControl实例，指令会自动把多个单选输入的值同步到同一个实例上。
而响应式表单的formControlName指令没有做同组单选的实例复用逻辑，每一个挂载了formControlName的DOM元素都会单独生成一个指令实例，哪怕它们指向的是FormGroup中同一个FormControl实例，每个指令也会单独监听状态变化，所以你订阅statusChanges会收到3次回调。本质上FormGroup里的gender还是只有1个FormControl实例，只是你在每个单选上挂载的验证指令都单独触发了提示逻辑。

2. 响应式表单单选组仅触发1次验证的修改方案 #

你不需要改变控件实例的生成逻辑，只要调整验证提示的触发条件即可，有两种可选方案：

• 方案1：把验证指令从单选input上移到父级容器，不用给每个单选input都加appFormControlValidation指令，只需要在外层form-group容器上绑定gender这个FormControl实例，只在父级做一次状态监听和错误提示渲染，自然只会弹出1次提示。
• 方案2：给验证指令加重复触发过滤逻辑，在appFormControlValidation指令里增加判断，只有当前是同组单选的第一个元素、或者当前元素为选中状态时才触发错误提示，避免同组多个元素重复提示。

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