Angular 2 FormBuilder disable fields on checkbox select

Question

I have build angular cli project and have a form with checkbox. Some of the fields must disable on checkbox select.

Form is as follows:

need to disable/enable password, new password and re type password fields on checkbox select event.

Html

<form [formGroup]="userProfileForm" (ngSubmit)="submitForm(userProfileForm.value)">

    <div class="row">
        <div class="col">
            <div class="form-group">
                <label> {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}</label>
                <input class="form-control" type="text" [formControl]="userProfileForm.controls['userName']">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
                <input class="form-control" type="text" [formControl]="userProfileForm.controls['displayName']">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
                <input class="form-control" type="text" [formControl]="userProfileForm.controls['email']">
            </div>
        </div>
        <div class="col">
            <div class="form-group ">
                <label class="checkbox-inline">
                <input type="checkbox" value="isResetPassword" name="isResetPassword" [formControl]="userProfileForm.controls['isResetPassword']">  
                 {{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
              </label>
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
                <input class="form-control" type="password" [formControl]="userProfileForm.controls['password']">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
                <input class="form-control" type="password" [formControl]="userProfileForm.controls['newPassword']">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
                <input class="form-control" type="password" [formControl]="userProfileForm.controls['reTypePassword']">
            </div>

        </div>

    </div>
</form>

ts code

this.isResetPassword = true;
this.userProfileForm = formBuilder.group({
    'userName': [null, [Validators.required]],
    'displayName': [null],
    'email': [null, [Validators.required]],
    'isResetPassword': this.isResetPassword,
    'password': [{
        value: null,
        disabled: this.isResetPassword
    }],
    'newPassword': [{
        value: null,
        disabled: this.isResetPassword
    }],
    'reTypePassword': [{
        value: null,
        disabled: this.isResetPassword
    }]
})

Form has built inside the constructor. How can I disable/enable the above fields on check box select.

As per above answers use formControlName. On click event on checkbox call one eventhandler in which toggle value of isResetPassword and then add below statement. userProfileForm.updateValueAndValidity(); — Prathmesh Dali
– Prathmesh Dali, Commented Jul 7, 2017 at 22:10

developer033 · Accepted Answer · 2018-10-01 02:37:55Z

At first, I believe that you want to enable fields if and only if isResetPassword checkbox is selected, right? If so, here we go:

1 - The construction of the form should be like this:

this.userProfileForm = this.formBuilder.group({
  // ...
  password: [{
    value: null,
    disabled: !this.isResetPassword
  }],
  newPassword: [{
    value: null,
    disabled: !this.isResetPassword
  }],
  reTypePassword: [{
    value: null,
    disabled: !this.isResetPassword
  }]
});

Note that here I'm disabling inputs only when this.isResetPassword is false.

2 - To detect changes on your <input type="checkbox">, you can use either (change) in template:

<label>
  <input 
    type="checkbox" 
    [formControl]="userProfileForm.controls['isResetPassword']" 
    (change)="handleChange($event)">
  {{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>

... or even, in component, using valueChanges:

this.userProfileForm.get('isResetPassword').valueChanges.subscribe(value => this.handleChange(value));

And, of course, here's the function to manipulate the state of fields.

handleChange(value: boolean): void {
  const passwordCtrl = this.userProfileForm.get('password');
  const newPasswordCtrl = this.userProfileForm.get('newPassword');
  const reTypePasswordCtrl = this.userProfileForm.get('reTypePassword');

  if (value) {
    passwordCtrl.enable();
    newPasswordCtrl.enable();
    reTypePasswordCtrl.enable();
  } else {
    passwordCtrl.disable();
    newPasswordCtrl.disable();
    reTypePasswordCtrl.disable();
  }
}

Some tips:

1 - Although it's only a matter of preference, it's worth to mention that you don't need to use [formControl] like this:

[formControl]="userProfileForm.controls['isResetPassword']"

Instead, you can simply use formControlName:

formControlName="isResetPassword"

Note that you can do the same for all your controls.

2 - You don't need to pass the form value in (ngSubmit) since you've already the reference of userProfileForm in form.

Instead of:

(ngSubmit)="submitForm(userProfileForm.value)"

submitForm(value: any) { console.log(value); }

This:

(ngSubmit)="submitForm()"

submitForm() { console.log(this.userProfileForm.value); }

3 - If you want to see the value of disabled inputs, instead of .value, you should use .getRawValue(), like this:

this.userProfileForm.getRawValue();

DEMO (using (change))

DEMO (using valueChanges)

Fabio Antunes · Accepted Answer · 2017-07-07 11:45:18Z

The easiest way would be to create a form group just for the passwords:

this.userProfileForm = formBuilder.group({
  'userName': [null, [Validators.required]],
  'displayName': [null],
  'email': [null, [Validators.required]],
  password: formBuilder.group({
    'isResetPassword': this.isResetPassword,
    'password': [null],
    'newPassword': [null],
    'reTypePassword': [null]
  })
})

Then on your template change the passwords col to this:

<div class="col" formGroupName="password>
  <div class="form-group ">
    <label class="checkbox-inline">
      <input type="checkbox" formControlName="isResetPassword">  
      {{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
    </label>
  </div>
  <div class="form-group ">
    <label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
    <input class="form-control" type="password" formControlName="password" >
  </div>
  <div class="form-group ">
    <label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
    <input class="form-control" type="password" formControlName="newPassword">
  </div>
  <div class="form-group ">
    <label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
    <input class="form-control" type="password" formControlName="reTypePassword">
  </div>
</div>

on your component:

//when value changes, to disable all the fields just do this
this.userProfileForm.controls.password.disable();
// to enable them back
this.userProfileForm.controls.password.enable();

ranbuch · Accepted Answer · 2019-02-27 08:58:45Z

4

Most of the methods on this post works but you need to do it with a setTimeout:

setTimeout(() => {
    if (this.disable) {
       this.userProfileForm.controls.password.disable();
    }
    else {
        this.userProfileForm.controls.password.enable();
    }
});

Looks like an Angular bug, issues here and here

answered Feb 27, 2019 at 8:58

ranbuch

1,64117 silver badges14 bronze badges

Comments

Wolf · Accepted Answer · 2023-12-18 02:17:18Z

0

You also can reference to your form setting in the control you want disable e.g.

[disabled]="!formName.value.fieldName"

answered Dec 18, 2023 at 2:17

Wolf

6,5372 gold badges32 silver badges28 bronze badges

Comments

Bishoy Saeed · Accepted Answer · 2024-07-23 12:02:55Z

0

you may wanna to subscribe to the input and handling disable() or enable() functions like that

    this.form.get('checkbox').valueChanges.subscribe(i => {

   const inp1 = ...
   const inp2 = ...
   const inp3 = ...

   here u need to make your code about disable or enable the other inputs

})

answered Jul 23, 2024 at 12:02

Bishoy Saeed

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

ADreNaLiNe-DJ · Accepted Answer · 2017-07-07 11:47:16Z

Instead of using [formControl] for your controls in the template, use formControlName.

Your form will look like this:

<form [formGroup]="userProfileForm" (ngSubmit)="submitForm(userProfileForm.value)">

    <div class="row">
        <div class="col">
            <div class="form-group">
                <label> {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}</label>
                <input class="form-control" type="text" formControlName="userName">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
                <input class="form-control" type="text" formControlName="displayName">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
                <input class="form-control" type="text" formControlName="email">
            </div>
        </div>
        <div class="col">
            <div class="form-group ">
                <label class="checkbox-inline">
                <input type="checkbox" value="isResetPassword" name="isResetPassword" formControlName="isResetPassword">  
                 {{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
              </label>
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
                <input class="form-control" type="password" formControlName="password" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
                <input class="form-control" type="password" formControlName="newPassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
                <input class="form-control" type="password" formControlName="reTypePassword" [attr.disabled]="userProfileForm.value.isResetPassword?'':null">
            </div>

        </div>

    </div>
</form>

And you have to define your form like this:

this.userProfileForm = formBuilder.group({
    'userName': [null, [Validators.required]],
    'displayName': [null],
    'email': [null, [Validators.required]],
    'isResetPassword': [false],
    'password': [null],
    'newPassword': [null],
    'reTypePassword': [null]
})

Wasif Khan · Accepted Answer · 2017-07-07 11:29:12Z

-3

You need to write a callBack on click of checkbox like (click)="checkBoxClicked()" and in component define callback function as follows

checkBoxClicked() {
 if(!this.userProfileForm.controls.isResetPassword.value) {
   this.userProfileForm.controls.password.disable();
   this.userProfileForm.controls.newPassword.disable();
   this.userProfileForm.controls.reTypePassword.disable();
 }else {
   this.userProfileForm.controls.password.enable();
   this.userProfileForm.controls.newPassword.enable();
   this.userProfileForm.controls.reTypePassword.enable();
 }
}

answered Jul 7, 2017 at 11:29

Wasif Khan

9547 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular 2 FormBuilder disable fields on checkbox select

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related