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.

Reproof

Possible duplicate of Disable Input fields in reactive form – Hirsch

Check the latest answer from this post: #42840636 when a form control is disabled, it is exempted from validation checks. – Hirsch

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" – Eboat

Thank you to all for your responses, specially to you @Eliseo, your solution works for me. – Reproof

Answer 1

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".

Reproof

Answer 2

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'));

Sequestrate

this should be accepted as solution – Omnidirectional

Answer 3

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.

Katlynkatmai