Угловой - Проверить несколько дочерних компонентов формы как грязные

Question

У меня есть несколько дочерних компонентов, содержащих form - значение формы будет отправлено из родительских компонентов - я зациклил дочерние компоненты в родительском и передал данные компонентам

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

<form #formType="ngForm">
    <div class="col-lg-4" *ngFor="let data of productSizes; let i = index;">
        <div class="inlinediv" *ngFor="let item of data.ItemDetails">
            <div class="marginright15 inlinediv">
                <ng-container *ngIf="item.Foundation">
                    <b>{{item.Size.toUpperCase()}}</b><br />
                    <input *ngFor="let val of item.Foundation" type="text" appNumbericInput maxlength="4" [(ngModel)]="val.Val" class="inputcustom text-right" [disabled]="(val.Val == null ? true : false) || disableChecker" (input)="enableSave=true" />
                </ng-container>
            </div>
        </div>
    </div>
</form>

Child Component.ts

@Component({
    selector: 'app-base-mattress',
    templateUrl: './base-mattress.component.html',
    styleUrls: ['./base-mattress.component.css']
})

export class BaseMattressComponent implements OnInit {
    @Input() productSizes: IItemDetails[];
    @ViewChild('formType') formVariable: NgForm;
    blobURL: string = environment.blobURL;
    constructor() {}
    ngOnInit() {}
}

Родительский компонент html

<ng-container *ngFor="let slot of slotRequests; let j = index;">
    <ng-container *ngIf="slot.ItemGrouping.toLowerCase() === 'mattress'">
        <ng-container *ngFor="let data of slotRequests[j].Data; let i = index;">
            <app-base-mattress [productSizes]="data"></app-base-mattress>
        </ng-container>
    </ng-container>
</ng-container>

Теперь моя проблема в том, что я хочу прочитать переменную формы дочернего компонента? Я не хочу, чтобы сервис подписывался и проверял, не грязный ли form, я пробовал много раз, это не работает.

Я пытался сопоставить моего ребенка с переменной шаблона, как это <app-base-mattress [productSizes]="data" #childData></app-base-mattress> но кажется, что я зацикливаю дочерний компонент, поэтому он не действует как ссылочная переменная для конкретного компонента. Пожалуйста, помогите мне узнать, как я могу прочитать переменную формы дочернего компонента

Рабочая версия моего StackBlitz

Заранее спасибо !!

Answer 1

используйте элемент формы в компоненте верхнего уровня

<form #formType="ngForm">
    <ng-container *ngFor="let slot of slotRequests; let j = index;">
        <ng-container *ngIf="slot.ItemGrouping.toLowerCase() === 'mattress'">
            <ng-container>

                <div *ngFor="let data of slotRequests[j].Data; let i = index;">
                    <app-base-mattress [productSizes]="data.ItemDetails"></app-base-mattress>
                </div>

            </ng-container>
        </ng-container>
    </ng-container>
</form>

Используйте viewproviders для предоставления controncontainer, который является суперклассом для formDirectives и использует существующую группу ngForm вместе с вашей формой

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { NgForm, ControlContainer } from '@angular/forms'

@Component({
  selector: 'app-base-mattress',
  templateUrl: './base-mattress.component.html',
  styleUrls: ['./base-mattress.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class BaseMattressComponent implements OnInit {
  @Input() productSizes: any[];

  constructor() { }

  ngOnInit() {
  }

}

Пример: https://stackblitz.com/edit/angular-ch5yh2

Answer 2

Вы можете сделать это:

parent.component.html :

<app-base-mattress #childCmp [productSizes]="data"></app-base-mattress>

parent.component.ts :

@ViewChildren('childCmp ')
childCmps: QueryList<BaseMattressComponent>;

, а затем итерация по ним для достижения желаемых результатов

this.childCmps.forEach((item) => {
...
});