从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-enhanced <form>的事件，因此您将只使用它：

<form preventFormChangesLoss>
...
</form>

---

不是根据你的设计，而是一个提示：既然你说你想要为你的所有表单做这个，那么将选择器更改为form:not([allowFormChangesLoss])可能更简单。然后，您只需将模块导入共享模块，所有已创建的表单都将具有此功能。如果要在特定表单上禁用它，可以使用<form allowFormChangesLoss>，从而反转“默认”行为。