[英]How to validate the child component NgForms having 3 different NgForm from the parent component in 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.我有一个场景,我正在访问两个不同的 NgForms,一个在父表单#parentform 中,另一个在子组件#childForm & #childForm1 中,我想检查子表单控件的有效性在父组件表单中是否有效. How to do this in angular4.
如何在 angular4 中做到这一点。
I also followed this link: Check if a form is valid from a parent component using Angular 4我还点击了这个链接: Check a form is valid from a parent component using Angular 4
everytime i am getting undefined for the reference of child component form.每次我都未定义子组件表单的引用时。
My code is something like this.我的代码是这样的。
parent.component.html父组件.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子组件.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>
Now i want to validate the child component form "childForm" & "childForm1" valid or not in parent form.现在我想验证子组件表单“childForm”和“childForm1”在父表单中是否有效。
Same is reproduced at https://stackblitz.com/edit/angular-cjorjz ...同样转载于https://stackblitz.com/edit/angular-cjorjz ...
So what you want, is to pass the parentForm.form.status
to the child with an @Input() .所以你想要的是通过@Input()将
parentForm.form.status
传递给孩子。
In parent html:在父 html 中:
<child-component [parent]="parentForm.form.status"></child-component>
Then in your child:然后在你的孩子:
@Input() parent: any;
private boolean: boolean = false;
ngOnChanges(changes: any) {
if(changes.dataSet.currentValue === 'VALID'){
this.boolean = true;
}
else { this.boolean = false; }
}
And to check it console.log(this.boolean)
it or put {{boolean}}
in html.并检查它
console.log(this.boolean)
它或将{{boolean}}
放在 html 中。 Or childForm.form.valid && save() && boolean
in html.或者
childForm.form.valid && save() && boolean
。
EDIT编辑
To send the validation back:发回验证:
In the child component you have to tigger the @Output() so use a change event on the html:在子组件中,您必须触发 @Output() 以便在 html 上使用更改事件:
@Output valid: EventEmitter<any> = new EventEmitter<any>();
private checkValid(_childForm: string){
if(_childForm === 'VALID'){
this.valid.emit(true);
}
else { this.valid.emit(false);
}
In html to all your child formsfield:在 html 中发送到您所有的子表单域:
(ngModelChange)="checkValid(childForm.form.status)"
In your parent html:在您的父 html 中:
<child-component [parent]="parentForm.form.status" (valid)="setValidChild($event)"></child-component>
In the parent component:在父组件中:
private childBoolean: boolean= false;
private setValidChild(_boolean: boolean){
this.childBoolean = _boolean;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.