Myujth

Hello i am trying to understand how can you create reusable forms in Typescript .What i understood so far is that you can create a Form Component , write its HTML file where you use the model fields.You leave the .ts file untouched.

Then you come with the component that needs the form and you embed the selector inside the parent component's HTML file:

Form Component

@Component(
 selector: 'app-user-form',
 templateUrl: './user-form.component.html',
 styleUrls: ['./user-form.component.sass']
)
 export class UserFormComponent implements OnInit 
 public Submit(empform:NgForm):void //can i make this abstract...or somehow make it available from the parent component to implement?
 console.log(empform);
 
 constructor() 

 ngOnInit() 

 

 
 <form #userForm="ngForm" (ngSubmit)="Submit(userForm)">
 <div class="form-group">
 <label>Id</label>
 <input id="id" [(ngModel)]="id" type="text" class="form-control" name="jid">
 </div>
 <button type="submit" class="btn btn-primary">Save</button>
 <//form>

So now what i understand is that if you declare a variable inside the parent Component with the fields named as in the form you have successfully binded them.

Parent Component

 export class CreateComponent implements OnInit 

 public id:number; // this parent variable is bound to the field of the form 


 submit(empForm:NgForm):void //override or something depending on the parent
 console.log(empForm);
 


<div id="childForm">
 <app-user-form></app-user-form>
</div>

What i am curious is if how can i make the form to expose a method for the parent ,and the parent to implement it? I want to make the form dumb and the parent to decide how to respond to the submit.