代码之家 › 专栏 › 技术社区 › hilnius

从角度指令获取ngform实例

angular-forms angular-directive typescript angular

hilnius · 技术社区 · 6 年前

我正在尝试创建一个行为,其中所有附加到 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>

不幸的是,这不起作用,我还希望我的指令不必执行 #myForm="ngForm" 部分,以便我可以根据需要命名表单,并将此行为分开。

我该怎么做呢?有人能指点我在文件中的正确位置吗?

1 回复 | 直到 6 年前

Lazar LjubenoviÄ 6 年前

无法获取这样的表单元素,因为它不是指令的一部分看法 . 相反,你应该直接注入它。

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)
  }
}

这将允许您操作和订阅特定角度增强的事件 <form> 在指令中,所以您只能这样使用它:

<form preventFormChangesLoss>
...
</form>

不是按照你的设计,而是一个提示:既然你说你想这样做 全部的 您的窗体,将选择器更改为 form:not([allowFormChangesLoss]) . 然后您只需要将模块导入到共享模块中,并且 全部的 已经创建的表单将具有此功能。如果要在特定表单上禁用它,可以使用 <form allowFormChangesLoss> 从而逆转“默认”行为。

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前