Parent form-child from communication OR relation OR validation

1
votes

I think this question has already been asked in complex terms. But I'm trying to make it simple here.

I have a parent component having form tag & Submit Button. it has got a child component having an input required field with form tag & button.

Now let's say I want to put custom validation to the input field that is entered letters must be uppercase which works fine. In short both validations work fine in child cmp.

You can check & play here => https://plnkr.co/edit/0iMTib?p=preview

how can I enable parent's submit button,
OR
how can I make parent form valid,

if child form is valid?

also consider with If I have more nested forms!

Is there any relationship between parent's form and child's form in ANGULAR2 ???

1
angularangular2-formsangular2-formbuilder

1 Answers

0
votes

You can emit child form status when valueChanges and add some logic to the parent form to check for that:

<child (valid)="childValid($event)"></child>

For more complex use cases I'd suggest using global app state to hold form status/values, which then can be accessed from anywhere in your application. Here's an example that uses @ngrx/store: gist.