关于 angular:Enable When Checkbox is Check in Reactive Forms


Enable When Checkbox is Check in Reactive Forms

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

的链接

链接代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  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]
      }))
    })
      })

  }

Have a look at the Demo & Src

堆栈闪电战，分叉

Explanation:

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

    另一种方法是创建指令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    @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 ) {
      }
    }

    然后你可以使用like

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