8

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.

4
  • Possible duplicate of Disable Input fields in reactive form Feb 4, 2019 at 19:34
  • Check the latest answer from this post: stackoverflow.com/questions/42840136/… when a form control is disabled, it is exempted from validation checks. Feb 4, 2019 at 19:34
  • 3
    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 4, 2019 at 19:45
  • Thank you to all for your responses, specially to you @Eliseo, your solution works for me.
    – Luis
    Feb 4, 2019 at 20:14

3 Answers 3

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

0
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'));
1
  • this should be accepted as solution Nov 9, 2021 at 13:53
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.