как проверить форму в angular с помощью поля ввода Dynami c

Question

Я сейчас реализую динамическую c форму с angular фреймворком. эта форма имеет кнопку ДОБАВИТЬ, которая может вставить 2 новых поля ввода в виде строки в этой форме. Там функция проверки для каждого поля ввода, если проверка истинна, будет активна кнопка СОХРАНИТЬ.

Но теперь у меня проблема. Если я дважды щелкну эту кнопку ADD и вставлю 2 строки с 4 полями ввода (в каждой строке 2 поля ввода). Вся форма будет действительной, если в первой или второй строке все поля ввода заполнены.

но мое золото в том, что форма будет действительной только в том случае, если заполнены все 2 строки с 4 полями ввода.

Код: родительский компонент HTML:

  <app-dynamic-filter-content [node]="node" (selectedValueChange)="onSelectedValueChange(node)"
                                    (formStatusChanged)="onFormStatusChanged($event)"></app-dynamic-filter-content>
<div class="dynamic-filter-add-delete-button">
          <button
            mat-icon-button
            (click)="addNewItem(node)">
            <mat-icon>add</mat-icon>
          </button>
          <button
                  mat-icon-button
                  (click)="remove(node)"
                  class="dynamic-filter-delete-button">
            <mat-icon>delete</mat-icon>
          </button>
  </div> 
 <button mat-button color="primary" (click)="onSaveData()" [disabled]="isInvalidData">Save</button>

родительский компонент ts

  public onFormStatusChanged(invalid: boolean): void {
    this.isInvalidData = invalid;
  }

и дочерний компонент

<form  [formGroup]="filterForm">
      <mat-form-field appearance="legacy">
        <input matInput type="text" [formControl]="predicateField"  [(ngModel)]="node.field" [name]="node.id"
               [matAutocomplete]="auto" placeholder="Field" required />
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let field of filterFields" [value]="field.value">
            {{field.value}}
          </mat-option>
        </mat-autocomplete>
        <mat-error *ngIf="predicateField.invalid">Field is required</mat-error>
      </mat-form-field>
      <span style="padding-left: 10px"></span>
      <mat-form-field appearance="legacy">
        <input matInput type="text" [(ngModel)]="node.value" [formControl]="predicateValue"
               [matAutocomplete]="predicateValueAC" placeholder="Value" required />
        <mat-autocomplete #predicateValueAC="matAutocomplete">
          <mat-option *ngFor="let option of filterValues" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
        <mat-error *ngIf="predicateValue.invalid">Value is required</mat-error>
      </mat-form-field>
    </ng-container>
  </form>

добавить дочерний компонент ts

 public predicateOperator: FormControl = new FormControl('', Validators.required);
  public predicateField: FormControl = new FormControl('', Validators.required);
  public predicateValue: FormControl = new FormControl('', Validators.required);

 @Output() public formStatusChanged = new EventEmitter();

constructor(public fb: FormBuilder) {
    this.filterForm.valueChanges.subscribe(() => {
      this.formStatusChanged.emit(this.filterForm.invalid);
    });
  }

th ie текущий результат

, поэтому из этого числа pi c вы можете увидеть, что кнопка SAVE активна, если в первой строке все поля заполнены.

любые решения ??