Angular 5: Validating disabled fields

Question

I found this post but it cant solve my problem. I can't validate a simple form with FormControls disabled. I did make a stackblitz example here, please check out my code and verify that is impossible to verify the value of the name control if it's disabled.

Stackblitz code

Thank you in advance.

Possible duplicate of [Disable Input fields in reactive form](https://stackoverflow.com/questions/42840136/disable-input-fields-in-reactive-form) — Christian Benseler, Feb 04 '19 at 19:34
Check the latest answer from this post: https://stackoverflow.com/questions/42840136/disable-input-fields-in-reactive-form when a form control is disabled, it is exempted from validation checks. — Christian Benseler, Feb 04 '19 at 19:34
If you want not loose the validate you can use [attr.disabled]="true" (or any condition). This give your control an apparence of disabled but still is "validating" — Eliseo, Feb 04 '19 at 19:45
Thank you to all for your responses, specially to you @Eliseo, your solution works for me. — Luis, Feb 04 '19 at 20:14

score 17 · Accepted Answer · edited Oct 22 '20 at 01:55

17

Solution by @Eliseo:

If you want not loose the validate you can use [attr.disabled]="condition ? true : null" (or any condition). This give your control an apparence of disabled but still is "validating".

edited Oct 22 '20 at 01:55

Anil Kumar

65
5

answered Feb 04 '19 at 20:15

Luis

2,006
5
31
47

score 5 · Answer 2 · edited Apr 14 '21 at 17:33

5

The reason disabled fields are not validated is because angular forms skips them from the validation. Since the control level is skipped, you will need to add that validation on the group level. credit goes to this comment https://github.com/angular/angular/issues/25182#issuecomment-408629027

The code would look like this:

this.formGroup.setValidators((form) => Validators.required(form.get('disabledControl'));

edited Apr 14 '21 at 17:33

Dharman

30,962
25
85
135

answered Apr 14 '21 at 17:27

Rstar37

454
5
6

this should be accepted as solution – Ferenc Dajka Nov 09 '21 at 13:53

fix · Answer 3 · 2022-11-11T05:14:50.130

None of the solutions here worked for me (Angular 14), so I ended up having to duplicate FormControls for the required fields. Then, in the valueChanges subscription that populates those disabled fields, I also populate the hidden fields.

this.addressFormGroup = this._fb.group({
  address1: new FormControl({ value: null, disabled: true }, Validators.required),
  address2: new FormControl({ value: null, disabled: true }),
  city: new FormControl({ value: null, disabled: true, }, Validators.required),
  country: new FormControl({ value: null, disabled: true }),
  county: new FormControl({value: null, disabled: true}),
  state: new FormControl({ value: null, disabled: true }, Validators.required),
  zip: new FormControl({ value: null, disabled: true }, Validators.required),

  // hidden, required fields
  address1Hidden: new FormControl(null, Validators.required),
  cityHidden: new FormControl(null, Validators.required),
  stateHidden: new FormControl(null, Validators.required),
  zipHidden: new FormControl(null, Validators.required)
});

Copying the values from the disabled fields into the hidden fields.

someEvent.subscribe((response) => {        
  (<FormControl>this.addressFormGroup.controls['address1']).setValue(response.addressLine1);
  (<FormControl>this.addressFormGroup.controls['address2']).setValue(response.addressLine1);
  (<FormControl>this.addressFormGroup.controls['country']).setValue(response.country);
  (<FormControl>this.addressFormGroup.controls['county']).setValue(response.county);
  (<FormControl>this.addressFormGroup.controls['city']).setValue(response.city);
  (<FormControl>this.addressFormGroup.controls['state']).setValue(response.state);
  (<FormControl>this.addressFormGroup.controls['zip']).setValue(response.zip);

  (<FormControl>this.addressFormGroup.controls['address1Hidden']).setValue(response.addressLine1);
  (<FormControl>this.addressFormGroup.controls['cityHidden']).setValue(response.city);
  (<FormControl>this.addressFormGroup.controls['stateHidden']).setValue(response.state);
  (<FormControl>this.addressFormGroup.controls['zipHidden']).setValue(response.zip);
}

Technically, the Validators added in the first snippet are superfluous.

Angular 5: Validating disabled fields

3 Answers3

Linked