Angular4+ ReactiveForms 禁用和启用控件

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 并设置值“某物”。如果选择 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();
    }
}