Odtnhj

Is it possible to pass the ngSubmit function as a parameter?
I created a component that receives an Id and the name of the ngSubmit function, but how do I put this parameter on the template?

I have a component called validation-form

validation-form.component.html

<form [id]="formId" method="post" novalidate [(ngSubmit)]="">
 <ng-content></ng-content>
</form>

My validation-form.component.ts has

 @Input() formId: string;
 @Input() submit: string;

I pass this values like this

<validation-form formId="ResetPasswordForm" submit="resetPassword()">
</validation-form>

I want to put the value of @Input() submit: string; to to the (ngSubmit). How can i do this?

It looks like you want to handle the validation or submission on parent component rather than child component validation-form.

To achieve this, you can use @Output decorator. It will propagate event from child to parent. Here is the code which can help you to achieve the same.

validation-form.component.ts

 @Input() formId: string;
 @Input() submit: string;
 @Output() submit = new EventEmitter();

 public submit()
 this.validate.emit(this.formId); //<-- you can pass the object if you need more info to pass.
 

validation-form.component.html

<form [id]="formId" method="post" novalidate (ngSubmit)="submit()">
 <ng-content></ng-content>
</form>

Parent Component.html

<validation-form formId="ResetPasswordForm" (submit)="resetPassword($event)">
</validation-form>

Parent Component.ts

public resetPassword(formId)
 console.log("Form Id ", formId);