Validating nested forms in 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.

George K · Accepted Answer · 2017-06-26 11:05:24Z

2

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.

edited Jun 26, 2017 at 11:05

answered Dec 22, 2016 at 15:07

George K

1,7631 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Henry Mac · Accepted Answer · 2016-12-22 15:16:17Z

0

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.

answered Dec 22, 2016 at 15:16

Henry Mac

413 bronze badges

Collectives™ on Stack Overflow

Validating nested forms in Angular 2

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related