I have a submit button in parent component. Also I have several child components. Now I want to enable the button to save all values of the form in all child components once the validation passed. In parent component, I created the form group.

 public mainForm: FormGroup; 

In constructor of the parent component,

 constructor(private fb: FormBuilder) { this.mainForm = this.fb.group({ child1Form: this.fb.group({ projectName: [null, Validators.required], projectSource: [null, Validators.required] }); }); } 

In the parent html, we pass the form to the child.

<div> <app-child1 [child1Form]="mainForm.controls['child1Form']"></app-child1> </div> 

In child component html, the code is:

<form [formGroup]="child1Form"> <div> <input [(ngModel)]="projectName"> </div> <div> <input [(ngModel)]="projectSource"> </div> </form> 

In the ts file of the child component, we use the form from the parent component.

 @Input() child1Form: any; 

What I want is in the ngOnInit of the parent component, check the form validation.

ngOnInit() { this.mainForm.statusChanges.subscribe(data => { const f = this.mainForm.controls['child1Form']; if(f.valid || f.dirth) // do something such as enable/disable the submit button }); } 

However my question is the code didn't reach statusChanges part even I changed the text in the input control of the child component. I assume that when I type something the form's value or status is changed so I can do the validation.

I have a submit button in parent component. Also I have several child components. Now I want to enable the button to save all values of the form in all child components once the validation passed. In parent component, I created the form group.

 public mainForm: FormGroup; 

In constructor of the parent component,

 constructor(private fb: FormBuilder) { this.mainForm = this.fb.group({ child1Form: this.fb.group({ projectName: [null, Validators.required], projectSource: [null, Validators.required] }); }); } 

In the parent html, we pass the form to the child.

<div> <app-child1 [child1Form]="mainForm.controls['child1Form']"></app-child1> </div> 

In child component html, the code is:

<form [formGroup]="child1Form"> <div> <input [(ngModel)]="projectName" formControlName="projectName"> </div> <div> <input [(ngModel)]="projectSource" formControlName="projectSource"> </div> </form> 

In the ts file of the child component, we use the form from the parent component.

 @Input() child1Form: any; 

What I want is in the ngOnInit of the parent component, check the form validation.

ngOnInit() { this.mainForm.statusChanges.subscribe(data => { const f = this.mainForm.controls['child1Form']; if(f.valid || f.dirth) // do something such as enable/disable the submit button }); } 

However my question is the code didn't reach statusChanges part even I changed the text in the input control of the child component. I assume that when I type something the form's value or status is changed so I can do the validation.