代码之家 › 专栏 › 技术社区 › Muhammed Albarmavi

根据下拉选择值切换反应式窗体控件启用或禁用

typescript forms angular

Muhammed Albarmavi · 技术社区 · 6 年前

我有一些输入和选择元素的反应形式,其作用是根据选择的值禁用或启用这样的输入。

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条件中给定的值将表单的所有元素设置为禁用或启用,或者如果有其他更好的方法,建议我使用。

谢谢;

2 回复 | 直到 6 年前

dAxx_ 6 年前

您可以在一个表单组下添加所有关联的控件,然后只需禁用和启用它们。

假设我们有这个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();
   }
}

所以当我们按下顶部按钮时,它会调用toggle函数并检查该组是否已经被禁用,然后它会启用它,对于相反的方向也是如此。

我假设您不想禁用所有表单控件,只需要一部分输入。但是,如果您确实想禁用和启用整个表单,那么您只需除去其他嵌套组,并对该组执行相同的操作。
在您的情况下,您也要这样做,而不是按钮切换,您必须在订阅中这样做。
祝你好运!

Muhammed Albarmavi 6 年前

在我的例子中,我必须基于下拉列表的选定值禁用一些表单控件,我的解决方案是基于这样的值调用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')]();

})