How to check the validity of form control in side form array?

Question

I am unable to check the validity of form controls inside form group Please check below code (number of form arrays are dynamic)

 this.invoiceForm = this.builder.group({
  itemRows: this.builder.array([this.initItemRows()],[Validators.required])
});

  initItemRows() {
return this.builder.group({
  colName: ['', [Validators.required]],
  equat: ['>=', [Validators.required]],
  filValue: ['', [Validators.required, Validators.min(0.01)]]
});

}

HTML code

<form [formGroup]="invoiceForm">
        <div formArrayName="itemRows">
            <div *ngFor="let itemrow of invoiceForm.controls.itemRows.controls;let i = index" [formGroupName]="i"
                style="display: flex;align-items: center;">
                <div style="width: 45%;">
                    <mat-form-field style="width: 95%;">
                    <mat-select placeholder="Cohort" formControlName="colName">
                        <mat-option *ngFor="let item of filterCohortData()" 
                        value="{{item.columnName}}" [disabled]="item.isDisabled">
                        {{item.columnName}}
                    </mat-option>
                    </mat-select>
                </mat-form-field>
                </div>
                <div style="width: 20%;text-align: center;">
                    <span>&gt;=</span>
                </div>
                <div style="width: 25%;">
                    <mat-form-field  style="width: 95%;">
                    <input type="number" min ="0.01" step="1" matInput autocomplete="off" placeholder="Value" formControlName="filValue" />
                </mat-form-field>
                </div>
                <div style="width: 10%;">
                    <span *ngIf="i == 0" (click)="addNewRow()" matTooltip="Add Column" [ngClass]="{'noti-disable': invoiceForm.value.itemRows.length == colHeaders.length}">
                        <mat-icon>add_box</mat-icon>
                    </span>
                    <span *ngIf="i != 0" (click)="deleteRow(i, true)" matTooltip="Delete Column">
                        <mat-icon>indeterminate_check_box</mat-icon>
                    </span>
                </div>
            </div>
        </div>
    </form>
    {{invoiceForm.get('itemRows').status}}

<div class="btn-div">
    <button (click)="saveEqu()" *ngIf="filterType.value =='COLUMNWISE'"  [disabled]="invoiceForm.invalid">Save</button>
    <button (click)="close()" style="margin-left: 20px;">Cancel</button>
</div>

If i am deleting the value of filValue form control then Save button should be in disabled state

Answer 1

I have created a formarray and have added the validation. If formarray has 0 elements in it then I have disabled the submit button. this.formarray.invalid returns true or false based on whether form is valid or not.

I have used user example where user has firstname, lastname and age where firstname and lastname are compulsory fields so if user has not entered firstname or lastname the submit button stays disabled.

Here is the link of stackblitz where I have tried to solve your problem. When you delete/remove all values from formarray the submit button gets disabled.

If there is something which I have missed please let me know I would be happy to help