以编程方式禁用反应式表单组件

Question

我理解如何指定要禁用的被动表单控件的初始状态.

someControl: [{value: '', disabled: true}]

如何根据表单中另一个值的选择,以编程方式稍后更改禁用状态.因此,例如,someControl如果anotherControl在下拉列表中选择了某个值,则应禁用,否则启用.

谢谢

Answer 1

您可以valueChanges使用您的选择字段进行查看,这是一个带有下拉列表和输入字段的示例,我们将根据从下拉列表中选择的值禁用/启用它:

this.myForm = this.fb.group({
  selects: [''],
  inputField: ['']
})

  // subscribe to changes in select field, if the value chosen is "two", 
  // disable input field, else enable field
  this.myForm.get('selects').valueChanges.subscribe(val => {
    if(val === 'two') {
      this.myForm.get('inputField').disable()
    }
    else {
      this.myForm.get('inputField').enable()
    }
  })

这是一个

DEMO

编辑:

正如developer033建议的那样,你也可以使用简单的更改事件,其中模板...

<select formControlName="selects" (change)="checkValue()">
  <option disabled></option>
  <option *ngFor="let a of arr">{{a}}</option>
</select>

和组件将是:

checkValue() {
  if(this.myForm.get('selects').value === 'two') {
    this.myForm.get('inputField').disable()
  }
  else {
    this.myForm.get('inputField').enable()
  }
}

Answer 2

这应该有效

this.someControl.reset({value: '', disabled: true});