Передача ngSubmit в качестве ссылки Angular

Можно ли передать функцию 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() submit: string; к (ngSubmit). Как я могу это сделать?


typescript angular angular7 angularjs-directive
person Testador    schedule 14.11.2018    source источник
comment
Вам нужно будет передать соответствующую функцию как ссылку, а не по имени метода (например, <validation-form ... [submit]="resetPassword">). Функция не будет доступна по имени за пределами вашего компонента, который использует <validation-form>.   -  person Daniel W Strimpel    schedule 14.11.2018
comment
Я начинаю изучать angular, поэтому, если бы вы могли дать мне больше деталей, было бы здорово. Использование [submit]=resetPassword позволит получить ссылку на метод? И как мне использовать эту ссылку на ngSubmit? Спасибо за ответXD   -  person Testador    schedule 14.11.2018
comment
Я не вижу смысла в этом компоненте, поскольку он не делает ничего, кроме того, что уже делает стандартная форма. Но submit не должен быть входом. Это должен быть выход. Ваш компонент формы проверки должен генерировать событие своему родителю при отправке формы.   -  person JB Nizet    schedule 14.11.2018
comment
Я создал этот компонент, потому что я использую библиотеку проверки jquery, в которой уже есть все необходимые мне проверки и сообщения.   -  person Testador    schedule 16.11.2018

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вы хотите обрабатывать validation или submission в родительском компоненте, а не в дочернем компоненте validation-form.

Для этого вы можете использовать декоратор @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>

Родительский компонент.html

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

Родительский компонент .ts

public resetPassword(formId){
  console.log("Form Id ", formId);
}
person Sunil Singh    schedule 15.11.2018
comment
@Input() submit: string Эта строка не нужна логнеру, верно? - person Testador; 16.11.2018
comment
Точно, можно убрать. - person Sunil Singh; 16.11.2018