CODEWITHSUNDEEP
angulartypescriptformsangular8angular-reactive-forms
RISHABH AGGARWAL
RISHABH AGGARWAL

Reputation: 63

Reactive Form Validation Not updating on UI after form update

I am passing a form from Parent to chld component. All the validations are being done in Parent component and child component is just rendering it. However, I have a field called country in my form, which if updated, will fetch a new set of validation rules. The issue is, the error messages are not updating until I click on the field. I want error messages also to be dynamically updated. Below is my code. parentComponent.ts:

 this.addressForm
                 .get('city')
                 .setValidators([
                   Validators.maxLength(this.labelStateService.recipientValidation.city.maxLength),
                   Validators.pattern(this.labelStateService.recipientValidation.city.validationRegex),
                   this.labelStateService.recipientValidation.city.required ? Validators.required : Validators.nullValidator,
                 ]);
               this.addressForm
                 .get('contact')
                 .get('fullName')
                 .setValidators([
                   Validators.maxLength(this.labelStateService.recipientValidation.fullName.maxLength),
                   this.labelStateService.recipientValidation.fullName.required ?
       Validators.required : Validators.nullValidator,
                 ]);

ParentComponent.html:

<app-address-box [addressForm]="addressForm"></app-address-box>

Child Component.html

    <form [formGroup]="addressForm">
      <div class="form-floating-labels">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <select name="isoCountry" (change)="onCountryChange()" class="form-control" formControlName="isoCountry" [ngClass]="{
              'is-invalid':
                addressForm.get('addressForm').get('isoCountry').invalid &&
                (addressForm.get('addressForm').get('isoCountry').touched || submitted)
            }">
                <option *ngFor="let country of countries" [value]="country.alpha2Code">{{ country.shortName }} </option>
              </select>
              <label l10nTranslate for="isoCountry">ADDRESS.COUNTRY</label>
<p class="invalid-feedback">Enter a name.</p>
            </div>
          </div>

So, on update of this field, I want error messages to be updated automatically for other fields of this formGroup.

Pls help!!

Upvotes: 3

Views: 3434

Answers (2)

Hossein Ganjyar
Hossein Ganjyar

Reputation: 823

You could use of just a single line code for all of your form's controls by markAllAsTouched:

this.form.markAllAsTouched();

Upvotes: 0

Srikar Phani Kumar M
Srikar Phani Kumar M

Reputation: 1374

You need to add 2 more lines for your code to work. Please refer this:

 this.addressForm
                 .get('city')
                 .setValidators([
                   Validators.maxLength(this.labelStateService.recipientValidation.city.maxLength),
                   Validators.pattern(this.labelStateService.recipientValidation.city.validationRegex),
                   this.labelStateService.recipientValidation.city.required ? Validators.required : Validators.nullValidator,
                 ]);
               this.addressForm
                 .get('contact')
                 .get('fullName')
                 .setValidators([
                   Validators.maxLength(this.labelStateService.recipientValidation.fullName.maxLength),
                   this.labelStateService.recipientValidation.fullName.required ?
       Validators.required : Validators.nullValidator,
                 ]);


// Add these two lines
this.addressForm.get('city').updateValueAndValidity();
this.addressForm.get('contact').get('fullName').updateValueAndValidity();

Upvotes: 1

Related Questions