Получение экземпляра NgForm из директивы Angular

Question

Я пытаюсь создать поведение, при котором все мои формы, прикрепленные к директиве preventFormChangesLoss, будут вести себя так, чтобы при изменении формы (если это не pristine или submitted) страницапоказывает предупреждение, когда пользователь хочет уйти.

Для этого я пытаюсь получить свою директиву, чтобы получить экземпляр NgForm, к которому присоединена моя директива.На данный момент у меня есть

import { Directive, Input, ElementRef, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Directive({
  selector: '[preventFormChangesLoss]'
})
export class PreventFormChangesLoss implements OnInit, AfterViewInit {
  private origin: string = '';

  @ViewChild('myForm') form : NgForm;

  constructor(private elRef: ElementRef) {
    console.log(this.elRef);
  }

  ngOnInit() {
    console.log(this.elRef, this.form);
  }

  ngAfterViewInit() {
    console.log(this.elRef, this.form); // shows the native element, + 'undefined'
  }
}

И я использую его с

<form preventFormChangesLoss #myForm="ngForm">
...
</form>

К сожалению, это не работает, и я также хотел бы, чтобы моя директива получила экземпляр NgForm без необходимостивыполните часть #myForm="ngForm", чтобы я мог назвать свои формы так, как я хочу, и сохранить это поведение отдельно.

Как я могу это сделать, и кто-то может указать мне правильное место в документах?

Answer 1

Вы не можете получить элемент формы таким образом, потому что он не является частью view директивы .Вместо этого вы должны непосредственно ввести это.

import { Directive, Input, ElementRef, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Directive({
  selector: '[preventFormChangesLoss]'
})
export class PreventFormChangesLoss implements OnInit {
  private origin: string = '';

  constructor(private ngForm: NgForm) {
    console.log(this.ngForm);
  }

  ngOnInit() {
    console.log(this.ngForm)
  }
}

Это позволит вам манипулировать и подписываться на события определенного Angular-расширенного <form> изнутри директивы, так что вы будетеиспользуйте его только так:

<form preventFormChangesLoss>
...
</form>

---

Не в соответствии с вашим дизайном, но совет: поскольку вы сказали, что хотите сделать это для всех ваших форм, этоможет быть проще изменить селектор на form:not([allowFormChangesLoss]).Тогда вам просто нужно импортировать модуль в ваш общий модуль, и все ваши уже созданные формы будут иметь эту функциональность.Если вы хотите отключить его в определенной форме, вы можете использовать <form allowFormChangesLoss>, что инвертирует поведение по умолчанию.