传递ngSubmit作为参考Angular

Question

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?

Answer 1

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);
}