Angular 7：单选按钮表单控件的修补值不会更新 UI答案

【问题标题】：Angular 7: patching value of radio button Form Control does not update UIAngular 7：单选按钮表单控件的修补值不会更新 UI
【发布时间】：2019-06-10 09:56:37
【问题描述】：

我在 Angular 7 中使用了一个 HTML 模板，它由许多单选按钮组成，每个按钮都有一个关联的标签 - 这与一个 FormGroup 对象相关联。单击标签应更改要选择的单选按钮的状态并更新关联的 FormControl 的值。这行得通，我遇到的问题是在加载 UI 时设置要选择的特定单选按钮，或者使用 patchValue - 加载模板时 formGroup 的状态是正确的，但 UI 没有反映特定的单选按钮已被选中。

这是显示问题的代码：

  export class AppComponent  {
  frequencyMinutesOptions: number[] = [1, 2, 5, 10, 60];
  myForm: FormGroup;
  constructor() { 
  }

  ngOnInit() {
    this.myForm = new FormGroup({
      frequencyMinutes: new FormControl(5,[])
    });
    this.myForm.patchValue({'frequencyMinutes':10})
  }
}

HTML 模板：

<form [formGroup]="myForm">
        <ul>
        <li *ngFor="let frequency of frequencyMinutesOptions">
                <input id="asset-frequency-{{frequency}}" type="radio" value={{frequency}} formControlName="frequencyMinutes" /> 
      <label for="asset-frequency-{{frequency}}"> {{frequency}} </label>
    </li>
</ul>
</form>

相关CSS：

input {
    display: none;
}
input:checked+label {
    background-color: blue;
    color: #ffffff;
}

你可以在这里看到一个工作演示：

https://stackblitz.com/edit/angular-of2ubt

（我知道我应该在 Stackoverflow 编辑器中嵌入代码示例，但我不确定如何使用 Angular 7 / typescript 或者是否可能）

【问题讨论】：

标签： css angular radio-button

【解决方案1】：

使用 formGroupName 或调用外部函数将默认单选按钮设为 true。

    <div class="container">
    <form [formGroup]="myForm">
        <ul>
           <li *ngFor="let frequency of frequencyMinutesOptions">
                <input id="asset-frequency-{{frequency}}" type="radio" value="{{frequency}}" formControlName="frequencyMinutes" [checked]="isDefaultSelection(frequency)" >
      <label for="asset-frequency-{{frequency}}"> {{frequency}} </label>
    </li>
</ul>
   </form>
      <div class="debug">{{myForm.value | json}}
     </div> 
  </div>


   export class AppComponent  {
      frequencyMinutesOptions: number[] = [1, 2, 5, 10, 60];
  myForm: FormGroup;
  constructor() { 
  }

  ngOnInit() {
    this.myForm = new FormGroup({
      frequencyMinutes: new FormControl(5,[])
        });
        this.myForm.patchValue({'frequencyMinutes':10})
      }
     isDefaultSelection(frequency) {
       return frequency == 10 ? true : false;
     }
   }

或者干脆使用属性绑定

<input id="asset-frequency-{{frequency}}" type="radio" [value]="frequency" formControlName="frequencyMinutes">

【讨论】：

【解决方案2】：

这是一个类型错误。在您的 html 表单中，value="10" 被解释为字符串 '10'。你必须使用 this.myForm.patchValue({'frequencyMinutes':'10'}) 或（参见 [值]）

<input id="asset-frequency-{{frequency}}" type="radio" [value]="frequency" formControlName="frequencyMinutes" />

【讨论】：