Javascript 角度-将多个子组件窗体检查为脏

我有一些子组件持有一个

表单

-表单的值将从父组件发送-我已在父组件中循环子组件，并将数据传递给组件

子组件

<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>

父组件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>

提前谢谢
 您可以这样做：

parent.component.html：

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

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

您可以这样做：

parent.component.html：

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

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

在顶级组件中使用表单元素

<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>

示例：
在顶级组件中使用表单元素

<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>

示例：
您想从父级访问表单值吗？是-我想检查表单是否脏，并从中执行一些操作您可以创建stackblitz吗？我已经添加了stackblitz版本@Chellappan-请检查为什么observable不起作用？我有一个信念，它应该。在服务中创建observable，并在子组件的表单脏操作中触发它，该子组件具有要区分的唯一ID。虽然我也认为这会使应用程序复杂化你想从父级访问表单值吗？是的-我想检查表单是否脏，并从中执行一些操作你能创建stackblitz吗？我已经添加了stackblitz版本@Chellappan-请检查为什么observable不起作用？我有一个信念，它应该。在服务中创建observable，并在子组件的表单脏操作中触发它，该子组件具有要区分的唯一ID。虽然我也认为这会使appGood的答案复杂化——但我只需要表单脏的组件——我需要循环检查每个组件是否脏吗？如果你想像处理变量一样处理它们，那么你应该遍历所有组件。p、 在某些情况下，将唯一ID添加到
好答案中可能会有所帮助-但我只想要其形式为脏的组件-我是否需要循环检查每个组件是否脏？如果您希望将它们作为变量使用，那么您应该迭代所有组件。p、 在某些情况下，向
添加唯一ID可能会有所帮助，谢谢@erdalprinz gald的帮助。谢谢@erdalprinz gald的帮助。