Angular模板驱动表单单选按钮默认选中失效问题求助

问题根源 #

在Angular模板驱动表单中，单选按钮的选中状态不能通过原生checked属性控制——因为ngModel会接管表单控件的状态，原生属性会被强制覆盖。你之前用[checked]="'checked'"的方式不符合Angular表单的工作逻辑。另外代码里还有几个明显错误：

• 多个单选按钮重复使用同一个模板引用变量#promo="ngModel"，会导致控件状态冲突
• 第一个单选按钮的rquired是拼写错误，应为required
• 最后一个单选的[value]="undefined"搭配required存在逻辑矛盾（required要求必须选择，但undefined属于未定义值，会触发验证错误）

正确实现步骤 #

1. 在组件类中定义绑定变量
   在组件的.ts文件里声明一个变量，用来存储选中的单选值，默认设为你要选中的选项值：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 默认选中"None"对应的value，用'none'代替undefined避免验证问题
  selectedPromo = 'none';
}

2. 修正模板代码
   去掉所有[checked]属性，将所有单选按钮的ngModel绑定到上面定义的selectedPromo变量，同时修正拼写错误和重复的模板引用变量：

<div class="donut-form-promos">
  <span>Promo:</span>
  <div class="donut-form-promos-choices">
    <input
      type="radio"
      name="promo"
      [value]="'newPromo'"
      required
      [(ngModel)]="selectedPromo"
    /><span>New</span>
    <input
      type="radio"
      name="promo"
      [value]="'limitedPromo'"
      required
      [(ngModel)]="selectedPromo"
    /><span>Limited</span>
    <input
      type="radio"
      name="promo"
      [value]="'clubPromo'"
      required
      [(ngModel)]="selectedPromo"
    /><span>Club member</span>
    <input
      type="radio"
      name="promo"
      [value]="'none'"
      required
      [(ngModel)]="selectedPromo"
    /><span>None</span>
  </div>
</div>

原理说明 #

Angular模板驱动表单中，同一name属性的单选按钮会组成一个控件组，ngModel绑定的变量值会和每个单选的value做匹配：当变量值等于某个单选的value时，该单选按钮会被自动选中。这种方式是Angular官方推荐的表单状态控制方式，能确保表单状态和组件数据保持同步。

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