How to apply validations in formarray in angular 8 - html

Question

I am using formArray to display dynamic data in table and its working as expected, but I am unable to apply the required field validation. I want to validate this table so that no null entry can be save.
In template:
<form *ngIf="userForm" [formGroup]="userForm">
<table>
<tbody formArrayName="order">
<ng-container *ngFor="let orderLine of properties; let i=index" [formGroupName]="i">
<tr>
<td class="fieldspacing">
<input class="form-control" formControlName="propertyName"
[readOnly]="orderLine.IsReadOnly" type="text">
<ng-container *ngIf="order.get('propertyName').hasError('required')">
<span class="errorMsg">Property name cannot be null</span>
</ng-container>
</td>
<td class="fieldspacing">
<select class="form-control selectwidth" formControlName="propertyType" type="text"
(change)="valueChange(i)">
<option *ngFor="let type of propertyTypes" value="{{type.Id}}">{{type.TypeName}}
</option>
</select>
</td>
<div *ngIf="orderLine.PropertyTypeId == 4">
<td class="fieldspacing">
<input type="checkbox" formControlName="readOnly" (change)="handleSelected($event,i)"><label> Has
Parent</label>
</td>
<td class="fieldspacing" *ngIf="orderLine.IsReadOnly || contentEditable">
<select class="form-control selectwidth" formControlName="parentProperty" type="text">
<option *ngFor="let parent of properties" [value]="parent.ParentHierarchyPropertyId">
{{parent.ParentHierarchyPropertyName}}
</option>
</select>
</td>
</div>
</tbody>
</table>
<button (click)="saveUserAdditionalProperties()" type="submit"
class="mt-4 btn btn-primary">Save</button>
</form>
In controller
public properties: any = [
{
"Id": "0012",
"PropertyType": null,
"PropertyTypeId": 4,
"IsReadOnly": true,
"DisplayOrder": 0,
"PropertyName": "Gender",
"ParentHierarchyPropertyId": null,
"ParentHierarchyPropertyName": null,
},
{
"Id": "1234",
"PropertyType": null,
"PropertyTypeId": 4,
"IsReadOnly": false,
"DisplayOrder": 1,
"PropertyName": "save",
"ParentHierarchyPropertyId": null,
"ParentHierarchyPropertyName": null,
},
];
loadUserProperties() {
this.userForm = this.getForm();
}
getForm(): FormGroup {
return new FormGroup({
order: new FormArray(this.properties.map(this.getFormGroupForUserProperty)),
});
}
getFormGroupForUserProperty(userProperty: any) {
let formGroup: FormGroup = new FormGroup({
propertyName: new FormControl(userProperty.PropertyName,Validators.required),
propertyType: new FormControl(userProperty.PropertyTypeId),
parentProperty: new FormControl(userProperty.ParentHierarchyPropertyId),
readOnly: new FormControl(userProperty.IsReadOnly)
});

Answer 1

You need to use it for formArray
formArray: FormArray;
constructor(
private _formBuilder: FormBuilder
) {}
this.formArray = this._formBuilder.array([]);
new Array(LENGTH_NUMBER).fill(1).forEach(() => {
this.formArray.push(this._formBuilder.group({
FORMCONTROLNAME_ONE: ["", Validators.required],
FORMCONTROLNAME_TWO: ["", Validators.required],
FORMCONTROLNAME_THREE: ["", Validators.required]
}))
});
HTML side
<ng-container *ngFor="let formGroup of formArray.controls;">
<div [formGroup]="formGroup">
<input formControlName="FORMCONTROLNAME_ONE">
<input formControlName="FORMCONTROLNAME_TWO">
<input formControlName="FORMCONTROLNAME_THREE">
</div>
</ng-container>

Answer 2

Obviously you can apply a filter on the userForm that
if(userForm.value.order.length!==0){
// submit
}else{
// not submit
}