如何在窗体组中验证嵌套组件的动态列表?

我有一个包含嵌套组件动态列表的组件。在每个嵌套组件中都有一个窗体组来验证它。下面是父组件的代码:

export class ItemFromComponent implements OnInit {
 @ViewChildren('item') items: QueryList<ItemComponent>;

 itemList: Item[] = [];

 constructor(private _formBuilder: FormBuilder) {
  this.addItem();
 }
 itemListValidator(items: QueryList<ItemComponent>): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
   if (items) {
    for (let i = 0; i < items.length; i++) {
      if (items[i].itemFormGroup.invalid) {
         return {'isNotValid': true};
      }
    }
     return null;
   } else {
     return null;
   }
  };
 }

  addItem(): void {
    const item = new Item();
    this.itemList.push(item);
  }

ngOnInit() {
    this.itemsFormGroup = this._formBuilder.group({
      itemListFormControl: ['', this.itemListValidator(this.items)]
    });
  }

父模板:

<app-ribbon text="New product items"></app-ribbon>
<form class="form-wrapper" [formGroup]="itemsFormGroup">
  <button mat-fab class="add-item-button" color="primary" matTooltip="Add one more item" (click)="addItem()">
    <mat-icon aria-label="Add one empty item to the list">add</mat-icon>
  </button>
  <mat-accordion class="example-headers-align">
    <div *ngFor="let item of itemList; let i = index">
      <app-item #item
                (deleteItem)="removeItem($event)"
                (cloneItem)="cloneItem($event)"
                [item]="item"
                [index]="i"
                [expanded]="i === 0 ? true : false">
      </app-item>
    </div>
  </mat-accordion>
</form>

这里最困难的部分是项目的数量是动态的,所以我尝试用一个定制的验证器函数来验证这些组件,该函数接受子组件列表的参数。如果其中一个还无效,它应该为用户返回一个错误。

因为子组件的列表最初是空的,所以我的自定义验证器总是返回null,因为列表是未定义的。此外,我的自定义验证器只在init上验证。每次用户在子组件中添加新输入时,我都需要它来验证列表。也许是孩子的事?