Question

我有一些输入和select元素的反应形式，作用是禁用或启用，因此输入要基于select的值。

this.form.get('option').valueChanges.subscribe((value: string) => {

    if (value === 'value1') {
        this.form.get('input01').disable();
        this.form.get('input02').disable();
        this.form.get('input03').disable();
    } else {
        this.form.get('input01').enable();
        this.form.get('input02').enable();
        this.form.get('input03').enable();
    }
});

我的表单有10个类似的输入。所以我有10行代码来启用和10行代码来禁用。我一直在寻找一种将代码重构为类似setValue方法的方法，例如根据if条件中给出的值将表单的所有元素设置为禁用或启用，或者建议我是否还有其他更好的方法方式。

谢谢；

Answer 1

您可以将所有关联的控件添加到FormGroup下，然后可以禁用和启用它们。

假设我们有以下HTML：

<form [formGroup]="cForm" (submit)="submitForm(cForm.value)" novalidate>
    <button (click)="toggle()">Toggle</button>
    <br>
    <input formControlName="mainControl" type="text" name="mainControl" required />
    <div formGroupName="g1">
        <input formControlName="test" type="text" required />
    </div>
    <div formGroupName="g1">
        <input formControlName="test2" type="text" required />
    </div>
    <input type="submit" value="submit" [disabled]="!cForm.valid">
</form>

因此，我们有一个包含输入的表格，另一组包含两个输入，因此您只想禁用两个输入。

代码：

this.cForm = this._fb.group({
  mainControl: [
    null,
    [Validators.required])
  ],
  g1: this._fb.group({
    test: [null, [Validators.required]],
    test2: [null, [Validators.required]]
  })
});
toggle = () => {
   const control = this.cForm.get("g1");
   if (control.disabled) {
     control.enable();
   } else {
     control.disable();
   }
}

因此，当我们按顶部按钮时，将调用切换功能，并检查该组是否已禁用，然后启用该功能，反方向也相同。

我假设您不想禁用所有表单控件，仅禁用一部分输入。但是，如果您想禁用并启用整个表单，则可以摆脱另一个嵌套组，并对该组执行相同的操作。
在这种情况下，您必须执行相同的操作，而不是按钮切换，而必须在订阅中进行。
祝你好运！

Answer 2

在我的情况下，我必须基于下拉列表的选定值禁用某些表单控件，我的解决方案是基于这样的值调用disable / enable方法

 this.form.get('input02')[value === 'testValue' ? 'enable' : 'disable']();

我们可以简称为value === 'testValue' ? 'enable' : 'disable'以创建一个cutome函数

getState(state:boolean) : string { 
  return state ? 'enable' : disable; 
}

最终解决方案

this.form.get('option').valueChanges.subscribe((value: string) => {

  this.form.get('input01')[this.getState(value === 'value1')]();
  this.form.get('input02')[this.getState(value === 'value1')]();
  this.form.get('input03')[this.getState(value === 'value1')]();

  // now I can test more cases  
  this.form.get('input04')[this.getState(value === 'value2')]();
  this.form.get('input05')[this.getState(value === 'value2')]();

  this.form.get('input06')[this.getState(value === 'value3')]();
  this.form.get('input07')[this.getState(value === 'value3')]();

})

切换反应式表单控件根据下拉选择的值启用或禁用

2 个答案: