Check box selection to enable /disable textboxes using angular reactive forms

Question

Onload itself textboxes are disabled mode, if we select checkbox, textboxes should be enabled and uncheck textboxes should be disabled mode and no error borders. I tried below code, validations are working fine but unable to disable/enable checkboxes, please help me the issue..

<input type="checkbox" #chkEnable ngModel />
<label>CheckBox Select to Enable/Disable</label>
<div class="form-group">
    <label>First Name</label>
    <input type="text" [disabled]="!chkEnable.checked" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': ( f.firstName.touched)  && f.firstName.errors }" />
    <div *ngIf="((f.firstName.touched) && f.firstName.errors)" class="invalid-input"></div>
</div>

Demo

Kinjal · Accepted Answer · 2021-04-09 15:04:58Z

1

you cannot disable reactive form field from HTML. If you wan to disable reactive from you can use disable() method from reactive form.

After these changes you can disable field.

remove [disabled] property from input.
add (change) event to checkbox

<input type="checkbox" #chkEnable ngModel (change)="disableField(chkEnable.checked)" />

in .ts file create method to disable input

disableField(checked) { Object.keys(this.f).forEach(key => { if (!checked) { this.f[key].disable(); } else { this.f[key].enable(); } }); }

using this method you can disable all fields in from.

Also if you want to make fields disable on load you can change your form by below code

this.registerForm = this.formBuilder.group({
  firstName: [{ value: "", disabled: true }, Validators.required],
  lastName: [{ value: "", disabled: true }, Validators.required]
});

Demo

answered Apr 9, 2021 at 15:04

Kinjal

6803 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kinjal Over a year ago

stackoverflow.com/questions/44969382/… In this link you can find other ways to disable input fields

Rajasekhar Over a year ago

Hi @Kinjal, Could you please suggest me the below question stackoverflow.com/questions/67549092/…

Minal Chauhan · Accepted Answer · 2021-04-12 10:32:57Z

0

we create the change event for checkbox:

<input type="checkbox" (change)="isChecked($event)">
   
isChecked(event){
    let isChecked=event.target.value; 
    if (isChecked) {                         
          this.registerForm.get("firstName").disable();
          this.registerForm.get("lastName").disable();
    } 
    else {
          this.registerForm.get("firstName").enable();
          this.registerForm.get("lastName").enable();
    }
}

I attached the link also https://stackblitz.com/edit/checkbox-to-enable-disable-2bqfkf?file=app/app.component.ts

edited Apr 12, 2021 at 10:32

Minal Chauhan

6,16812 gold badges24 silver badges41 bronze badges

answered Apr 9, 2021 at 16:56

suresh

512 bronze badges

Collectives™ on Stack Overflow

Check box selection to enable /disable textboxes using angular reactive forms

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related