Angular2- Template driven form validation for input field in child component

Question

I was struggling with adding template driven form validation in my angular2 app.

i have a forked the plunker https://plnkr.co/edit/phhe74kAUmNZgNSmcsvm?p=preview

i failed to achieve the form validation for my custom component alone and other html components are working fine.

In the plunker, if you start typing name and street it will updated in both form and and my model object as well. but the when you start typing postcode it will update only in my model object and not with form.

I wanted the form to be invalid if i make postcode filed to empty.

Is i missed something here ?

AVJT82 · Accepted Answer · 2017-03-19 15:56:00Z

2

Currently, your form doesn't recognize your child components' input field as a form field, you need to change your child tag a bit... to have the name attribute and ngModel to bind this child component to the form. Also include required here.

Lastly, you need to add ngDefaultControl to have two-way binding for the form field. So your child tag should look like this in your parent:

<my-input name="postcode" ngModel ngDefaultControl required [(value)]="user.address.postcode"></my-input>

Here is your forked

Plunker

answered Mar 19, 2017 at 15:56

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Collectives™ on Stack Overflow

Angular2- Template driven form validation for input field in child component

1 Answer 1

Plunker

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related