傳遞ngSubmit作為參考Angular

Question

是否可以將ngSubmit函數作為參數傳遞？ 我創建了一個接收ID和ngSubmit函數名稱的組件，但是如何將此參數放在模板上？

我有一個稱為驗證形式的組件

驗證-form.component.html

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

我的validation-form.component.ts有

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

我這樣傳遞這個值

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

我想把@Input（）的值提交：string; 到（ngSubmit）。 我怎樣才能做到這一點？

Answer 1

看來您想在父組件而不是子組件validation-form上進行validation或submission 。

為此，可以使用@Output裝飾器。 它將事件從子級傳播到父級。 這是可以幫助您實現相同目標的代碼。

驗證-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.
  }

驗證-form.component.html

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

父Component.html

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

父組件

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