我试图从父组件检查放置在子组件上的表单的有效性.最好的方案是在表单无效时禁用父组件上的按钮,或者在更糟糕的情况下,如果表单无效则从父按钮触发警报.
我可以使用@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>
解决方法
由于Angular隐式地将ngForm应用于所有表单元素,并且您可以通过组件/指令类引用引用组件模板中的任何组件/指令,因此您不必读取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)