I am creating a form group with a checkbox in Angular 13. Here, the field of receiver code is disabled by default. How can I enable this input field when the checkbox is checked and disable when it's not?
in my .ts I have:
export class IntPayComponent implements OnInit {
paymentDetails!: FormGroup;
disabled = true;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.paymentDetails = this._formBuilder.group({
receiver_code: new FormControl({value:"", disabled: true})
});
}
and in my html template I have:
<mat-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="paymentDetails">
<form [formGroup]="paymentDetails">
<div class="add-directory">
<mat-checkbox>Add to Directory</mat-checkbox>
</div>
<div class="reference-field">
<mat-form-field appearance="fill" floatLabel="always">
<mat-label>Receiver Code</mat-label>
<input matInput formControlName="receiver_code"/>
</mat-form-field>
</div>
</form>
</mat-step>
</mat-stepper>
You can simply use the "output" change of the mat-checkbox
You can also use a simple checkbox if you're using a simple input type checkbox (or you want not use (change) event-
See the stackblitz with both aproach
NOTE: Not always need "change" our FormGroup. if only want to change the "apparence" of the .html it's better use a new variable that not belong to the FormGroup or another method