CODEWITHSUNDEEP
angularangular2-forms
Srivathsan Chellappan
Srivathsan Chellappan

Reputation: 11

Nested Form validation status not rolling up (angular2)

I have a property component and an address component. Each property has a physical and a billing address. In the property template to create a new property i have

<property>
property fields like name etc.. with required attribute
<address></address> (for physical address) - has required attributes as well
<address></address> (for billing address) - has required attributes as well
</property>

The save button in property has a form.valid check to validate whether all required fields are entered. In the above case the save button is enabled once all required property fields are entered and it ignores the address component. How do we validate the entire form with the address component?

Version used: angular2.0 (beta0)

We want the submit button to be enabled only after all the required fields are filled in. here is the plunker link: http://plnkr.co/edit/scq69cH3mjXrjFZn7pPp?p=preview

Upvotes: 1

Views: 1241

Answers (1)

Thomas Vuillemin
Thomas Vuillemin

Reputation: 134

You can do that by using a local template variable that you set on the adress component in the template : 

<address #adress></address>

You can then use this variable to access the adress component 

<input type="submit" [disabled]="!parent.form.valid||!adress.childForm.valid" value="submit" class="btn btn-success" />

I have updated your plunkr : http://plnkr.co/edit/gSASvPwLVVW4ImQOXKWP?p=preview

Upvotes: 1

Related Questions