Angular disable input if checkbox is checked

Question

I have one input and one checkbox and I want to disable the input if checkbox is checked. Any suggestions?

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

Answer 1

You can use reactive forms valueChanges observable on your checkbox control to achieve this.

@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();
            }
         })
   }
}