Angular 2 form validation: fields inside components

Question

Let's say I have something like this:

<form>
   <my-component></my-component>
</form>

"my-component" in it's template has an "input" element.

How can I make my "form" to be aware of that field inside the component? I use template-driven form approach and I would like it to stay this way. The input has the "name" and "ngModel" set.

You'll have to bind the value into and out of the component. — jonrsharpe

Hung Cao Hung Cao · Accepted Answer · 2017-01-24T22:34:49

You may want to use FormGroup (https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html).

Create a FormGroup object in your parent component.
Use 2 way binding to pass this FormGroup to your my-component.
Inside your my-component, add your input to the FormGroup.

Angular 2 form validation: fields inside components

2 Answers