Basically i have a form Array of inputGroups, i'm using ng-Zorro (antd Angular) and trying to validate my inputGroup and display error messages According to which control is wrong: Here's the form Template :
<form nz-form [formGroup]="form">
<ng-container formArrayName="clouds">
<nz-form-item *ngFor="let n of getClouds().controls; let ni = index;" [formGroupName]="ni">
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nuages" nzRequired>Cloud {{ni+1}}</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="n.get('height')"
nzErrorTip="Must be three digit number !">
<nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
<ng-template #addOnBeforeTemplate>
<nz-select formControlName="cloud" nzAllowClear style="width: 64px;">
<nz-option nzValue="Cumulus" nzLabel="Cumulus"></nz-option>
<nz-option nzValue="Cirrus" nzLabel="Cirrus"></nz-option>
</nz-select>
</ng-template>
<input nz-input formControlName="height" placeholder="height" style="width: 64px" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
</ng-container>
and the form TS file :
ngOnInit(): void {
this.form = this.fb.group({
clouds: this.fb.array([this.createCloudControl()])
})
createCloudControl() {
return this.fb.group({
cloud: [, [Validators.required]],
height: ['', [Validators.required, Validators.pattern("^[0-9]{3}$")]],
})
}
The problem is that the "cloud" field is required but the error msg doesn't show when it's not provided. The "height" field is working fine and error msg is showing. What i want is to display error message Depeding on which field is invalid
Thanks in advance