如何从Angular4中的父组件中验证具有3个不同NgForm的子组件NgForms [英] How to validate the child component NgForms having 3 different NgForm from the parent component in Angular4

问题描述

我有一个场景，我正在访问父窗体中的两个不同的NgForms窗体#parentform和Child组件#childForm& ＃childForm1，我想检查子表单控件的有效性是否有效。如何在angular4中做到这一点。

我也跟着这个链接：
检查一个表单是否使用Angular 4的父组件是有效的

每当我得到未定义的子组件形式的参考。

我的代码是这样的。

parent.component.html

 < form class =form-wrapper（ngSubmit） =parentForm.form.valid&& save（）＃parentForm =ngFormnovalidate> 
将输入的ID = 名字 类型= 文本 占位符=  类= 验证 名称= 名字[（ngModel）] = firstname_ ＃的firstName = ngModel 所需> 
< / form> 
< child-component>< / child-component> 
  

child.component.html

 < form class =form-wrapper（ngSubmit）=childForm.form.valid&& save（）＃childForm =ngFormnovalidate> 
将输入的ID = phoneNumber的 类型= 文本 占位符=  类= 验证 名称= phoneNumber的[（ngModel）] = phone_ ＃phoneNumber的= ngModel 所需> 
< / form> 
 
< form class =form-wrapper（ngSubmit）=childForm1.form.valid&& save（）＃childForm1 =ngFormnovalidate> 
将输入的ID = 移动电话号码 类型= 文本 占位符=  类= 验证 名称= 移动电话号码[（ngModel）] = mobile_ ＃移动电话号码= ngModel 所需> 
< / form> 
  

现在我想验证子组件窗体childForm& childForm1有效或不在父窗体中。

同样在 https：// stackblitz .com / edit / angular-cjorjz ...

解决方案

所以你想要的是通过 parentForm.form.status 添加到具有 @Input（）的子元素。

父元素：

 < child-component [parent] =parentForm.form.status>< / child-成分> 
  

然后在您的孩子中：

  @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），或者在html中放置 {{boolean}} 。或 childForm.form.valid&& save（）&& boolean in html。

编辑

发送验证回来：

在子组件中，您必须调整@Output（），以便在html上使用更改事件：

  @Output valid：EventEmitter< any> = new EventEmitter< any>（）; 
 $ b private checkValid（_childForm：string）{
 if（_childForm ==='VALID'）{
 this.valid.emit（true）; 
} 
 else {this.valid.emit（false）; 
  

在所有您的子窗体字段的html中：

 （ngModelChange）=checkValid（childForm.form.status）
  

在您的父级html中：

 < child-component [parent] =parentForm.form.status（有效）= setValidChild（$事件） >< /儿童成分> 
  

在父组件中：

  private childBoolean：boolean = false; 
 
 private setValidChild（_boolean：boolean）{
 this.childBoolean = _boolean; 
  

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.

I also followed this link: Check if 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

    <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

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

Same is reproduced at https://stackblitz.com/edit/angular-cjorjz...

解决方案

So what you want, is to pass the parentForm.form.status to the child with an @Input().

In parent 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. Or childForm.form.valid && save() && boolean in html.

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

(ngModelChange)="checkValid(childForm.form.status)"

In your parent 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;

这篇关于如何从Angular4中的父组件中验证具有3个不同NgForm的子组件NgForms的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！