Angular Reactive Form：嵌套的单选按钮和复选框

Question

我尝试创建这种反应形式：

(o) Some radio button
( ) Another radio button
    [ ] A nested checkbox, disabled as long "Another radio button" is not selected
    [ ] Another checkbox, disabled as long "Another radio button" is not selected

复选框在上面显示的状态下被禁用。如果第二个单选按钮被激活，复选框也可以被选中。

如何在 Angular.io 中使用响应式表单对其进行建模？可以将其视为具有值的单个控件：

• 表示选择第一个单选按钮的人工值
• 第一个复选框的值
• 第二个复选框的值

另一种方式是它是一个布尔 FormControl，但如果是一个值，则在下面添加另一个 FormControl，但我认为这是不可能的。

在反应形式逻辑中建模的最佳方法是什么？

Answer 1

如果您的复选框选项已修复，那么您可以为 ngOnInit 中的“另一个单选按钮”选项创建一个嵌套的 FormGroup：

  ngOnInit() {
    this.form = this.fb.group({

      radioGroup: '0',
      ckBoxGroup2: this.fb.group({
        ckBoxG2_1: { value: false, disabled: true },
        ckBoxG2_2: { value: false, disabled: true },
      })
    });

然后在同一个 ngOnInit 方法中订阅单选按钮控件的 valueChange Observable。当然，还有其他对变化做出反应的方式，但我喜欢这样：

    this.form.get('radioGroup').valueChanges.subscribe(value => {
      value === '2' ? this.form.get('ckBoxGroup2.ckBoxG2_1').enable() : this.form.get('ckBoxGroup2.ckBoxG2_1').disable();
      value === '2' ? this.form.get('ckBoxGroup2.ckBoxG2_2').enable() : this.form.get('ckBoxGroup2.ckBoxG2_2').disable();
    });

在模板中创建相同的结构：

<form [formGroup]=form>

  <input type="radio" value="1" formControlName="radioGroup">Group 1<br />

  <input type="radio" value="2" formControlName="radioGroup">Group 2
  <div formGroupName="ckBoxGroup2" style="margin-left: 20px" >
    <div>
      <label>CheckBox 1
        <input type="checkbox" formControlName="ckBoxG2_1">
      </label>
    </div>
    <div>
      <label>CheckBox 2
        <input type="checkbox" formControlName="ckBoxG2_2">
      </label>
    </div>
  </div>

</form>

查看我根据您的示例制作的演示：https://stackblitz.com/edit/angular-cfcznq