I have a form with an object containing two 'normal' attributes and one form array. I need to validate whether a field in the object within the form array is a port or a portrange using regex, but the validation is not being displayed (no red input-field or mat-error).
Typescript
this.myForm = this.fb.group({
name: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9._-\s]*$')]],
description: ['', Validators.maxLength(255)],
elements: new FormArray([this.createElement()])
});
...
createElement(): FormGroup {
return this.fb.group({
'portRanges': ['', [Validators.required]],
'protocol': ['',[Validators.required, Validators.pattern('^\d+$|^\d+-\d+$')]]
});
}
<div formArrayName="elements" *ngFor="let e of elements.controls; let i = index;">
<div [formGroupName]="i">
<mat-form-field class="field">
<input tabindex="3" matInput placeholder="Port or range *" formControlName="portRanges"/>
<mat-error>Between 0 and 65535, or a range of two such numbers separated by a dash ( - )</mat-error>
</mat-form-field>
<mat-radio-group aria-label="Select a protocol" [ngStyle]="getStyle(e)" formControlName="protocol">
<mat-radio-button value="TCP" tabindex="4">TCP</mat-radio-button>
<mat-radio-button value="UDP" tabindex="5">UDP</mat-radio-button>
</mat-radio-group>
<div style="display: flex">
<div>
<div *ngIf="i === elements.controls.length - 1" style="margin-right: 5px;" class="action-btn" tabindex="6" (click)="addBlankElement()">
<i class="material-icons">add_circle</i>
</div>
</div>
<div *ngIf="elements.length > 1" class="action-btn remove-btn" tabindex="7" (click)="removeElement(i)">
<i class="material-icons">remove_circle</i>
</div>
</div>
</div>
</div>
Solved by validating all elements after value changes:
ngOnInit(){
this.createForm();
this.myForm.valueChanges.subscribe((data) => {
this.validate(this.myForm);
})
}
validate(group: FormGroup = this.myForm){
this.elements.controls.forEach((data) => {
data.updateValueAndValidity();
})
}