使用Angular 4检查表单是否对父组件有效 [英] Check if a form is valid from a parent component using Angular 4

问题描述

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

I am trying to check the validity of a form placed on a child component from a parent component. The best scenario would be to disable a button on the parent component if the form is invalid or in the worse scenario to trigger an alert from the parent button if form is invalid.

我可以使用@ViewChild装饰器在子组件上调用函数，从而检查父窗体是否具有"ng-invalid"类，如下所示:

I could achieve to check if the form has 'ng-invalid' class from the parent using a @ViewChild decorator to call a function on the child component as follows:

父项:

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的想法，而是一个更聪明的想法.

It works for the worst scenario, but I do not like the idea to link the component to the DOM, I would rather a smarter idea.

我想使用模板引用变量(#candiateForm)，例如，一个允许从表单(子项)检查提交"按钮(参见下文)的有效性以便从父项检查有效性的变量.可以从父级访问该模板变量吗?

I would like to use a template reference variable (#candiateForm), for example the one that allows to check validity in the submit button (see below) from the form (child) in order to check validity from the parent. Is it possible to have access to that template variable from the parent?

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

推荐答案

由于Angular将ngForm隐式应用于所有form元素，并且您可以通过component/directive类引​​用来引用组件模板中的任何component/directive，因此，无需阅读ElementRef且不需要模板引用#candiateForm，您可以通过指令类引用ngForm直接访问表单:

Since Angular applies ngForm to all form elements implicitly and you can reference any component/directive in the component template by component/directive class reference, you don't have to read ElementRef and don't need the template reference #candiateForm, you can access the form directly by the directive class reference ngForm:

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

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

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

And also you can access the form directly from the parent component:

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

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

这篇关于使用Angular 4检查表单是否对父组件有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！