如何在 angular 8 的 formarray 中应用验证

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

Obviously you can apply a filter on the userForm that

if(userForm.value.order.length!==0){
// submit
}else{
// not submit
}

Answer 2

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>