使用Angular 4检查表单是否在父组件中有效

Question

我试图从父组件检查放置在子组件上的表单的有效性.最好的方案是在表单无效时禁用父组件上的按钮,或者在更糟糕的情况下,如果表单无效则从父按钮触发警报.

我可以使用@ViewChild装饰器检查表单是否具有来自父级的'ng-invalid'类来调用子组件上的函数,如下所示:

父组件:

export class CandidateVerificationComponent implements OnChanges, OnInit {

@ViewChild(RightPanelComponent) rightPanelPointer: RightPanelComponent;

saveAndFinish() {

    if (this.rightPanelPointer.checkFormValidity())
    {
        alert('No Valid');
        return;
    }

    this.rightPanelPointer.onSubmit();

  }    
}

子组件:

export class RightPanelComponent implements OnChanges , OnInit{

@ViewChild("candiateForm", { read: ElementRef }) tref: ElementRef;

   checkFormValidity():boolean {        
    return (this.tref.nativeElement.className.indexOf('ng-invalid') !== -1);
   }  
}

它适用于最糟糕的情况,但我不喜欢将组件链接到DOM的想法,我宁愿更聪明的想法.

我想使用模板引用变量(#candiateForm),例如允许从表单(子)中检查提交按钮(见下文)中的有效性,以便检查父项的有效性.是否可以从父级访问该模板变量？

 <form (ngSubmit)="onSubmit()" #candiateForm="ngForm" name="candiateForm" (change)="formChanged()">
    <div class="form-group">
      <label class="control-label" for="firstName">First name:</label>                           
      <input type="text" class="form-control" id="firstName" pattern="^[^0-9]+$" required [(ngModel)]='candidate.firstName' name="firstName" #firstName="ngModel">
   </div>
<button type="submit" class="btn btn-default" [disabled]="!candiateForm.form.valid">Submit</button>
</form>

Answer 1

由于Angular 隐式地应用于ngForm所有form元素,并且您可以通过组件/指令类引用引用组件模板中的任何组件/指令,您不必读取ElementRef也不需要模板引用#candiateForm,您可以直接访问表单指令类引用ngForm:

export class RightPanelComponent implements OnChanges , OnInit{
    @ViewChild(NgForm) form;

    checkFormValidity():boolean {        
        return this.form.valid;
    }

您还可以直接从父组件访问表单:

export class CandidateVerificationComponent implements OnChanges, OnInit {
    @ViewChild(RightPanelComponent) rightPanelPointer: RightPanelComponent;

    saveAndFinish() {
        if (this.rightPanelPointer.form.valid)