如何验证子组件 NgForms 与 Angular4 中的父组件有 3 个不同的 NgForm [英] How to validate the child component NgForms having 3 different NgForm from the parent component in Angular4
问题描述
我有一个场景,我正在访问两个不同的 NgForms,一个在父表单 #parentform 中,另一个在子组件 #childForm & 中.#childForm1,我想检查父组件表单中子表单控件的有效性.如何在 angular4 中做到这一点.
I have a scenario where I am accessing two different NgForms one within Parent form #parentform and other in the Child component #childForm & #childForm1, and i want to check the validity of the controls of child form wether valid or not in parent component form. How to do this in angular4.
我也点击了这个链接:检查表单是否有效从使用 Angular 4 的父组件
每次我都未定义子组件表单的引用时.
everytime i am getting undefined for the reference of child component form.
我的代码是这样的.
parent.component.html
parent.component.html
<form class="form-wrapper" (ngSubmit)="parentForm.form.valid && save()" #parentForm="ngForm" novalidate>
<input id="firstName" type="text" placeholder="" class="validate" name="firstName" [(ngModel)]="firstname_" #firstName="ngModel" required>
</form>
<child-component></child-component>
child.component.html
child.component.html
<form class="form-wrapper" (ngSubmit)="childForm.form.valid && save()" #childForm="ngForm" novalidate>
<input id="phoneNumber" type="text" placeholder="" class="validate" name="phoneNumber" [(ngModel)]="phone_" #phoneNumber="ngModel" required>
</form>
<form class="form-wrapper" (ngSubmit)="childForm1.form.valid && save()" #childForm1="ngForm" novalidate>
<input id="mobileNumber" type="text" placeholder="" class="validate" name="mobileNumber" [(ngModel)]="mobile_" #mobileNumber="ngModel" required>
</form>
现在我想验证子组件表单childForm"&childForm1"在父表单中是否有效.
Now i want to validate the child component form "childForm" & "childForm1" valid or not in parent form.
同样在 https://stackblitz.com/edit/angular-cjorjz...
推荐答案
所以你想要的是通过 @Input() 将 parentForm.form.status
传递给孩子.
So what you want, is to pass the parentForm.form.status
to the child with an @Input().
在父 html 中:
<child-component [parent]="parentForm.form.status"></child-component>
然后在您的孩子身上:
@Input() parent: any;
private boolean: boolean = false;
ngOnChanges(changes: any) {
if(changes.dataSet.currentValue === 'VALID'){
this.boolean = true;
}
else { this.boolean = false; }
}
并检查它 console.log(this.boolean)
它或将 {{boolean}}
放在 html 中.或 childForm.form.valid &&保存()&&html 中的布尔值
.
And to check it console.log(this.boolean)
it or put {{boolean}}
in html. Or childForm.form.valid && save() && boolean
in html.
编辑
发回验证:
在子组件中,您必须触发 @Output(),因此在 html 上使用更改事件:
In the child component you have to tigger the @Output() so use a change event on the html:
@Output valid: EventEmitter<any> = new EventEmitter<any>();
private checkValid(_childForm: string){
if(_childForm === 'VALID'){
this.valid.emit(true);
}
else { this.valid.emit(false);
}
在你所有子表单域的 html 中:
In html to all your child formsfield:
(ngModelChange)="checkValid(childForm.form.status)"
在您的父 html 中:
In your parent html:
<child-component [parent]="parentForm.form.status" (valid)="setValidChild($event)"></child-component>
在父组件中:
private childBoolean: boolean= false;
private setValidChild(_boolean: boolean){
this.childBoolean = _boolean;
}
这篇关于如何验证子组件 NgForms 与 Angular4 中的父组件有 3 个不同的 NgForm的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!