How to access child component form field in parent component angular

Parent Component ts

Obj1={ name:"foo" fname:"Bee"} Obj2={field1: "data", field2:"data2" , filed3:"data3"}

html :

<form #f="ngForm">

<button type="button" class="btn btn-primary" [disabled]="f.valid && f.dirty">Submit</button>


<div class="form-group">
<label for="exampleInputEmail1">Name/label>
<input type="email" class="form-control" [(ngModel)]="obj1.name">

</div>

<div class="form-group">
<label for="exampleInputEmail1">fname/label>
<input type="email" class="form-control" [(ngModel)]="obj1.fname">

</div>


<childForm [formData]="Obj2" ></childForm>
</form>


Child Component Form:

@Input() formData:any;


HTML :

<div class="form-group">
<label for="exampleInputEmail1">field2</label>
<input type="email" class="form-control" [(ngModel)]="formData.field1">

</div>


<div class="form-group">
<label for="exampleInputEmail1">field2</label>
<input type="email" class="form-control" [(ngModel)]="formData.field2">

</div>

<div class="form-group">
<label for="exampleInputEmail1">field3</label>
<input type="email" class="form-control" [(ngModel)]="formData.field3">

</div>


I need to enable submit button if child component field made any changes and also form fields value need to map with obj2

Continue reading...