Enable a disabled input field by default when checkbox is checked in angular

Question

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>

Answer 1

You need to make the checkbox into a FormControl, say addDirectory:

this.paymentDetails = this._formBuilder.group({
  receiver_code: new FormControl({value:"", disabled: true}),
  addDirectory: new FormControl(false)
});

Then, after the FormGroup initialisation, you listen to its valueChanges Observable and modify receiver_code's disabled state accordingly:

this.paymentDetails.get('addDirectory').valueChanges.pipe(
  takeUntil(this.destroy$), // make sure you implement an unsubscribe strategy
  tap(addCtrlValue => {
    const receiverCtrl = this.paymentDetails.get('receiver_code');
    addCtrlValue ? receiverCtrl.enable() : receiverCtrl.disable();
  })
).subscribe();

You could make things a bit cleaner by setting the FormControls up as independent from the FormGroup, meaning you don't have to keep calling get to get access to them.

Also, FYI, you don't use the HTML disabled attribute when working with reactive forms. No doubt Angular has displayed a warning about this in the console.

Answer 2

You can simply use the "output" change of the mat-checkbox

<mat-checkbox (change)="paymentDetails.get('receiver_code')
           [$event.checked?'enable':'disable']()">
      Add to Directory
</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-

  <mat-checkbox [ngModel]="enable" 
                [ngModelOptions]="{standalone:true}"
                (ngModelChange)="enable=$event;
                  paymentDetails.get('receiver_code')[$event?'enable':'disable']()"

  >Add to Directory</mat-checkbox>

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