Question

我有一个场景，我在父窗体#parentform中访问两个不同的NgForms，在子组件#childForm＆amp; ＃childForm1，我想在父组件表单中检查子表单控件的有效性与否。如何在angular4中执行此操作。

我也关注此链接： Check if a form is valid from a parent component using Angular 4

每次我都未定义子组件表单的引用。

我的代码是这样的。

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>

现在我要验证子组件形式“childForm”＆amp; “childForm1”有效或无父母形式。

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

转载

Answer 1

所以你想要的是将parentForm.form.status传递给带有 @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中。或者在html中childForm.form.valid && save() && boolean。

修改

要发回验证：

在子组件中，您必须触发@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);

在html中显示所有子窗体：

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

在您的父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

1 个答案: