Question

我正在尝试创建一种行为，使我附加到preventFormChangesLoss指令的所有表单都能够正常运行，以便对表单进行更改（如果不是pristine或{{1 }}），该页面会在用户要离开时显示警告。

为此，我正在尝试获取我的指令以获取我的指令所附加的NgForm实例。现在，我有

submitted

我和

一起使用

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实例，以便我可以根据需要命名表单并将此行为分开。

我该怎么做，有人可以将我指向文档中的正确位置吗？

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>

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

从Angular指令获取NgForm实例

1 个答案: