Angular react 形式 : Nested Radio Buttons and Checkboxes

Question

我尝试创建这种 react 形式:

(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 中使用 react 形式对其进行建模？可以将其视为具有以下值的单个控件:

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

另一种方法是它是一个 bool 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