在Angular 2中验证嵌套表单

Question

I have a form which has three components in it. The following is the html of the form:

<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>

There are two components emp-info and emp-work. The emp-info and emp-work pages have some required fields. Now when I save the required fields should be validated. But I have the required fields in the child component and the save button in the parent component. Could anyone let me know how we could validate and display errors for the fields in the child component.

Answer 1

Angular Forms doesn't validate the Component internals. If you would like to validate emp-info | emp-work components then they should implement ControlValueAccessor . Thus Angular will be able to operate with the custom component (it will be fully functional FormControl).

Another option, which I believe will be more suitable when custom components are just containers, is to pass the FormGroup instance and thus connect internal form controls. Check Angular's documentation on this topic:

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

Notice how the DynamicFormQuestionComponent receives the FormGroup instance.

Answer 2

emp-work and emp-info are created with FormControl . Then put both inside FormGroup . Inside your object factory, you can use Validators.required Or any of it's attributes.