[英]Angular - Check multiple Child components form as dirty
I have some bunch of child components holding a form
- value for the form will be send from the parent components - i have looped the child components in the parent and passed the data to the components 我有一些持有form
的子组件- form
值将从父组件发送-我在父组件中循环了子组件并将数据传递给组件
Child Component 子组件
<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.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() {}
}
Parent Component html 父组件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>
Now my problem is that i want to read the child component form variable? 现在我的问题是我想读取子组件的表单变量? I don't want a service to subscribe and check whether the form
dirty, i have tried it many times it doesn't work. 我不希望服务订阅并检查form
是否脏了,我已经尝试了很多次,但无法正常工作。
I have tried to map my child with template reference variable like this <app-base-mattress [productSizes]="data" #childData></app-base-mattress>
but it seems I'm looping the child component so it doesn't seem to act as an reference variable for specific component - Please help me to find out how can i read the child component form variable 我试图用模板引用变量(例如<app-base-mattress [productSizes]="data" #childData></app-base-mattress>
映射我的孩子,但似乎我在循环子组件,所以它没有似乎没有充当特定组件的参考变量-请帮助我找出如何读取子组件表单变量
Working version of my StackBlitz 我的StackBlitz的工作版本
Thanks in advance !! 提前致谢 !!
use form element in your top level component 在顶层组件中使用表单元素
<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>
Use viewproviders to provide controncontainer which is super class for formDirectives the use existing ngForm group group together your form 使用viewproviders提供controncontainer,它是form的超类。Directives将现有的ngForm group组一起使用
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() {
}
}
Example: https://stackblitz.com/edit/angular-ch5yh2 示例: https : //stackblitz.com/edit/angular-ch5yh2
You can do this: 你可以这样做:
parent.component.html : parent.component.html :
<app-base-mattress #childCmp [productSizes]="data"></app-base-mattress>
parent.component.ts : parent.component.ts :
@ViewChildren('childCmp ')
childCmps: QueryList<BaseMattressComponent>;
and then iterate through them to achieve desired results 然后遍历它们以获得所需的结果
this.childCmps.forEach((item) => {
...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.