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

角反应形式：嵌套单选按钮和复选框

1 个答案: