angular - 当复选框在反应表单中检查时启用

Question

我需要帮助才能使行仅在选中复选框时才启用。默认行应该被禁用，但是当复选框只被选中时，该行将被启用。这是我的代码的链接

链接代码

  patchValues() {
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => {
      material.materials.forEach(x => {
      rows.push(this.fb.group({
        checkbox_value: [null],
        material_id:  new FormControl({value: x.id, disabled: true}, Validators.required),
        material_name: x.name, 
        quantity: [null, Validators.required]
      }))
    })
      })

  }

Answer 1

看看 Demo & Src

堆栈闪电战，叉子

解释：

1. 要启用或禁用输入字段，您需要使用以下语法[attr.disabled]="myForm.get('rows').value[i].checkbox_value ? null: ''"
2. attr.disabled, 这里的 attr 用于绑定不直接存在于元素上的属性
3. myForm.get('rows').value[i].checkbox_value, 是对表单控件值的相当直接的访问。

Answer 2

另一种方法是创建一个指令

@Directive({
  selector: '[enabledControl]'
})
export class EnabledControlDirective {

    @Input() set enabledControl(condition: boolean) {
        if (this.ngControl) {
            if (this.ngControl.control) {
                if (condition)
                    this.ngControl.control.enable();
                else
                    this.ngControl.control.disable();
            }
        }
  }
  constructor(private ngControl : NgControl ) {
  }
}

然后你可以使用喜欢

<input class="col-md-6" formControlName="quantity"
     [enabledControl]="row.get('checkbox_value').value" >