从 Angular 指令中获取 NgForm 实例

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

你不能像那样抓取表单元素，因为它不是指令的视图的一部分。相反，您应该直接注入它。

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>，从而反转“默认”行为。