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>

需要所有控件。当用户 select opt1 时，我想禁用 inputField 并设置值 'something'。如果select 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 控件上有条件地添加 "required"。

<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 禁用和启用控件

Angular4+ ReactiveForms disable and enable a control

angular

angular-reactive-forms