跨多个组件的表单验证答案

【问题标题】：Form validation across multiple components跨多个组件的表单验证
【发布时间】：2017-02-18 02:32:01
【问题描述】：

我正在使用 Angular2。我的主组件中有这个：

<form #f="ngForm" novalidate (ngSubmit)="save()">
  <child [cosField]="cosField" [f]="f"></child>
  <button type="submit" [disabled]="!f.valid">Submit</button>
</form>

我有一个从该组件调用的不同子组件。子组件中的代码是：

<input type="text" name="flow" [(ngModel)]="cosField.value" required  #name="ngModel"/>
<div [hidden]="name.valid || (!f.submitted)" 
    class="error">
  An error has occurred.
</div>

我想在子组件中访问这个局部变量 f。基本上用于表单验证。如果子组件中的某些验证失败，则会正确显示“发生错误”消息。但在主组件中， f.valid 仍然保持为真，因此提交按钮始终处于启用状态。但是，如果我将子组件内联到主组件本身，那么一切正常，如果验证失败，提交按钮将被禁用。有没有办法将表单拆分为多个组件，并且仍然能够使用局部变量 f 有效地验证控件？

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

使用 Angular2 @Output EventEmitter 将值从子组件中传递出去，因此父组件可以捕获事件并更新其对f 的有效性。

您必须为父组件和子组件添加到组件逻辑。 Typescript 中的模式如下所示：

父组件：

...<imports>...
@Component({
    selector: 'parent-component',
    ...
})
export class ParentComponent implements OnInit {
    ...
    ngOnInit() {
        ...
    });

    childChanged(event) {
        // Use event value to do validity checking here.
    }
}

子组件：

import { Component, Output, EventEmitter } from '@angular/core';
<...other imports...>

@Component({
    selector: 'child',
    ...
})
export class ChildComponent implements OnInit {
    @Output() change: EventEmitter<any> = new EventEmitter();

    ...
}

现在您孩子的input 可以在@Output 上发出一个事件，该事件传播到父级。例如，孩子可以在 blur 上传播更改并通过 name 的有效性：

<input type="text" name="flow" [(ngModel)]="cosField.value" required  #name="ngModel" (blur)="change.emit(name.valid)" />

父母通过查找您的自定义change事件来获取更改并处理有效性状态：

<child [cosField]="cosField" [f]="f" (change)="childChanged($event)"></child>

以下是我第一次了解这些东西时发现的其他有用的参考资料：

【讨论】：