Question

我有一个包含三个组件的表单。以下是表单的html：

<div class="p-r-0 m-t-1 p-r-half p-l-half">
    <div class="tab-content">        
        <div *ngIf="vitalsData != null">
            <emp-info *ngIf="far == '1'" [(dataContext)]="empData"></emp-info>
            <emp-work *ngIf="sections == '2'" [(dataContext)]="empData"></faa-ch145>
        </div>
    </div>
    <div class="right pull-top pos-relative">
           <button class="btn btn-primary" type="button">Reset</button>
           <button class="btn btn-primary" type="button">Save</button>
    </div>
</div>

有两个组件emp-info和emp-work。 emp-info和emp-work页面有一些必填字段。现在，当我保存所需的字段时，应该进行验证。但我在子组件中有必需的字段，父组件中有保存按钮。任何人都可以告诉我们如何验证和显示子组件中字段的错误。

Answer 1

Angular Forms不会验证Component内部。如果您想验证emp-info | emp-work组件，那么他们应该实施ControlValueAccessor。因此，Angular将能够使用自定义组件（它将是完全功能的FormControl）。

另一个选项，我认为当自定义组件只是容器时更适合传递FormGroup实例，从而连接内部表单控件。查看Angular关于此主题的文档：

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#!#question-form-components

注意DynamicFormQuestionComponent如何接收FormGroup实例。

Answer 2

使用FormControl创建emp-work和emp-info。然后把它们放在FormGroup里面。在对象工厂内，您可以使用Validators.required或其任何属性。

验证Angular 2中的嵌套表单

2 个答案: