CODEWITHSUNDEEP
angularvalidationangular5disabled-control
Luis
Luis

Reputation: 2133

Angular 5: Validating disabled fields

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.

Upvotes: 8

Views: 17858

Answers (3)

fix
fix

Reputation: 2175

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.

Upvotes: 0

Rstar37
Rstar37

Reputation: 534

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

Upvotes: 5

Luis
Luis

Reputation: 2133

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

Upvotes: 17

Related Questions