使用 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)