Question

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

我可以检查表单是否有“无效”字样。父类使用@ViewChild装饰器调用子组件上的函数，如下所示：

父组件：

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元素，并且您可以通过组件/指令类引用引用组件模板中的任何组件/指令，因此您不必阅读{{1}并且不需要模板引用ElementRef，您可以通过指令类引用#candiateForm直接访问表单：

ngForm

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

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

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

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

1 个答案: