I Have nested reactive form, like below

parent HTML <form> <child></child> <button mat-raised-button color="primary">Save</button> </from>

child HTML `<div [formGroup]="headerSection"> <!span [hidden]="headerSection.get('test').valid">required

I want to throw error message in child HTML, but when clicking the parent submit button...

I Have nested reactive form, like below

parent HTML

<form>
 <child></child>
 <button mat-raised-button color="primary">Save</button>
</form>

child HTML

<div [formGroup]="headerSection">
 <input type="text" formControlName="test">
 <!span [hidden]="headerSection.get('test').valid">required</span> 
</div>

I want to throw error message in child HTML, but when clicking the parent submit button...