How to apply form validations for nested components in angular2

Question

I have plunker demo here:

http://plnkr.co/edit/LX1m2zIpxe3M1Zs5F6zA?p=preview

which has a address component nested in parent component.

How can i apply form validations to the address component and get the values of the address component on form submit? Somebody guide me to get the form values of nested components.

  constructor(fb: FormBuilder) {  
this.myForm = fb.group({  
  'name':  ['', Validators.required],
  'Phone':  ['', Validators.required]  
});

}

How do I inject the values of the address component in the parent? What is the best practice for doing it because i am new to doing forms in nested components. Please help.

Could you use the required attribute on the address input field? — Sonu Kapoor

FussinHussin FussinHussin · Accepted Answer · 2017-09-27T16:42:07

you can do this but it will take some work. First you need to create a smart and dumb component relationship, the dumb component holding the html, and the smart component (the parent) holding the logic.

you can read about this pattern here

you need to use Angular's @Input and @Ouput to get and send values from the dumb component.

then you can use an Angular EventEmitter to send the form values back to the smart component

you can read more here

it is possible to do this with template driven forms. It looks like your current code is a mix of template driven and reactive... I would look into doing this with reactive forms, it will be simpler.

you can find out about reactive forms here

How to apply form validations for nested components in angular2

1 Answers