Angular 如果选中复选框则禁用输入

Question

我有一个输入和一个复选框，如果复选框被选中，我想禁用输入。有什么建议吗？

<input formControlName="checkbox" type="checkbox">
<input formControlName="input" type="number">

Answer 1

您可以在复选框控件上使用可观察到的响应式 valueChanges 来实现此目的。

@Component({...})
export class MyComponent implements OnInit {
   // Your form
   form:FormGroup = this.fb.group({checkbox: false, input: ''});
   
   constructor(private fb:FormBuilder){}

   ngOnInit() {
      // Subscribe to value changes - this will trigger whenever the value of your checkbox is changed (through click, or programmatically)
      this.form.get('checkbox').valueChanges
         .subscribe(value => {
            if (value) {
               // disable the input when new value is true
               this.form.get('input').disable();
            } else {
               // (re-)enable the input when new value is false
               this.form.get('input').enable();
            }
         })
   }
}