I am currently working on developing a dynamic form using Angular 16. My objective is to disable one of the input fields when a checkbox is checked to prevent data entry. However, the code I have implemented so far does not seem to be working as expected. Can someone provide assistance? When I remove the formControlName, the field gets disabled but then I am unable to capture the user input.
<form [formGroup]="personelForm">
<div class="row">
<mat-checkbox class="example-margin" formControlName="isCheck">Not Phone</mat-checkbox> <br>
</div>
<div class="row">
<mat-form-field style="margin-right: 10px;">
<mat-label>Phone</mat-label>
<input matInput type="number" formControlName="phone"
[disabled]="personelForm.get('isCheck').value">
</mat-form-field>
<mat-form-field style=" margin-right: 10px;">
<mat-label>Name</mat-label>
<input matInput type="text" formControlName="name">
</mat-form-field>
<mat-form-field style="margin-right: 10px;">
<mat-label>Surname</mat-label>
<input matInput type="text" formControlName="surname" >
</mat-form-field>
</div>
</form>
personelForm: FormGroup;
constructor(private fb: FormBuilder){}
reloadForm() {
this.personelForm = this.fb.group({
isCheck: new FormControl(false),
phone: new FormControl(0),
name: new FormControl(''),
surname: new FormControl('')
});
}
ngOnInit() {
this.reloadForm();
}