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"> 
- 1Does this answer your question? Angular reactive forms disable input when checkbox checkedRoy– Roy2020-11-26 19:25:40 +00:00Commented Nov 26, 2020 at 19:25
Add a comment |
1 Answer
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(); } }) } }