我有一些子组件持有 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>
子组件.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
是否脏了,我试了很多次了,还是不行。
我尝试用这样的模板引用变量映射我的 child
<app-base-mattress [productSizes]="data" #childData></app-base-mattress>
但似乎我正在循环子组件,因此它似乎不能充当特定组件的引用变量 - 请帮助我找出如何读取子组件表单变量
我的 StackBlitz 的工作版本
提前致谢!!
最佳答案
在顶级组件中使用表单元素
<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 提供 concontainer,它是 formDirectives 的父类(super class),使用现有的 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() {
}
}
关于javascript - Angular - 检查多个子组件是否脏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53332482/