Angular 2: Passing form data from child to parent only if it is valid

Question

I have an angular reactive form in the child component and Submit button in the parent component. By default, Submit button in the parent component is disabled. I need a mechanism through which I should be able to check the form status in the child component, whether it is valid or invalid.

The moment status valid becomes true, the button in parent component should be enabled.

How to accomplish this?

Khaled Ahmed · Answer 1 · 2018-02-05T16:07:25.920

1

my solution

app.child.ts

@Component({
    selector: 'app-child',
    template: `...`
})
export class AppChild {
    form: FormGroup;
}

app.parent.html

<app-child #child></app-child>

<button [disabled]="child.form.invalid">Submit</button>

edited Feb 05 '18 at 16:07

answered Feb 05 '18 at 06:20

Khaled Ahmed

1,074
8
21

This method works fine. I also used (click) and passed the form to a method in parent and accessed child form in parent. Is this the best method or is there any other approach with better performance? – crazyCoder Nov 26 '18 at 19:01
you can use ValidationService for that purpose. create your own Service `ValidatorService` and some how you notify the `parentComponent` to check and `emit` the validation status to that service and `subscribe` from the `parentComponent` to that status if there is any change it will be catch on a `callback function` and do what you want – Khaled Ahmed Nov 27 '18 at 00:13

score 0 · Answer 2 · answered Feb 09 '18 at 06:57

you need subscribe for valueChanges event in your child component, in which you can emit the value of your form,

this.formname.valueChange.subscribe(status=>{ this.valueEmit.emit(this.formname.valid) });
In you parent comonents template check status of that emitted event.

Angular 2: Passing form data from child to parent only if it is valid

2 Answers2