Question

我有一个类似下面的表格

<form [formGroup]="form">
  <select formControlName='selectList' (selectionChange)="onSelectChange($event)">
    <option value='opt1'>Opt-1</Option>
    <option value='opt2'>Opt-2</Option>
  </select>
  <input type='text' formControlName='inputField'/>
  <button [disabled]="!form.valid">Save</button>  
</form>

所有控件都是必需的。当用户选择opt1时，我想禁用inputField并设置值“ something”。如果选择opt2，则启用inputField并将值设置为null。

onSelectChange(e){
    if(e==opt1){
        form.controls.inputField.setValue='something';
        form.controls.inputField.disable();
    }else{
        form.controls.inputField.setValue=null;
        form.controls.inputField.enable();
    }
}

启用控件是可以的，但是当我设置控件时禁用inputField.valid=false并禁用了提交按钮。谢谢。

Answer 1

您必须在inputField控件上有条件地添加“必需”。

<input type="text" formControlName="inputField" [required]="form.get('selectList').value == 'opt1' ? true : null"/>

只有在选择opt1时，才需要inputField。

希望这项工作对您有用。

Answer 2

setValue是一种方法，不是属性，只需更改为此

onSelectChange(e){
    if(e==opt1){
        form.controls.inputField.setValue='something';
        form.controls.inputField.disable();
    }else{
        form.controls.inputField.setValue(null);
        form.controls.inputField.enable();
    }
}

Angular4 + ReactiveForms禁用并启用控件

2 个答案: