Currently, I have a situation where I am passing a form from the Parent component to the Child component. All the validations are being handled in the Parent component and the Child component is simply rendering it. However, there is a specific field called country in the form that, when updated, requires fetching a new set of validation rules. The issue I am facing is that the error messages for other fields do not update dynamically until I click on them. My goal is to have the error messages also updated automatically. Below you can see a snippet of my code. parentComponent.ts:
// Setting validators for city
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,
]);
// Setting validators for fullName
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>
In conclusion, I am looking for a solution where the error messages for other fields in the formGroup get updated automatically upon updating the country field. Any assistance would be greatly appreciated!