如何在 Angular 2.0 中使用 formControl 访问 Native HTML Input 元素

Question

我正在使用 Angular 2.0 最终版本。

我想做什么？ - 我只想在输入接收焦点时显示一些通知（警告，输入要求）。或者更好的是，当他的父母 (the div) 有 mouse hover 事件时。

从父级（div）执行此操作很容易。只需 (focus)=showNotifications() + 一个 ngIf - 就完成了。

但我想将此功能封装在 show-notifications 组件中 - 并使其可重用..

鉴于我使用@Input() 在显示通知中传递the control - 如果我可以访问native HTML input element，我可以同时执行这两项操作。您可以在show-notifications.component.ts 中查看如何操作。代码如下：

app.component.html：

`<div>
   <label>Name: </label>
   <input formControlName="myName">
   <show-notifications [the_control]="myName" ></show-notifications>
</div>`

app.component.ts：

export class AppComponent {
    myName = new FormControl("defaultvalue",[some validators..])
}

show-notifications.component.html：

<div class="show_requirements" *ngIf="hasfocus or parentDivHasMouseHover"> // incorect code and logic - i know, but you can see the idea..

    <p *ngFor="let requirement of thisInputRequirements">{{requirement}}<p>

</div>

show-notifications.component.ts：

export class ShowNotificationsComponent {

    @Input() the_control;
    this.thisInputRequirements = // take them form firebase.
    this.thisInputCustomErrorMessages = // take them from firebase.

    // I implemented all this and works amazing but i want to do:

    //something like this:

    ngOnInit(){
        this.nativeInputElement = this.the_control.getNativeElement() // this of course doesn't work

        // the requirements are shown only when the input receive focus
        let source = Rx.DOM.focus(this.nativeInputElement);
        source.subscribe( x => this.hasFocus = true)

        // Or even better: 
        // the requirements are shown only when the parent has mouse hover
        // or any other event / endles posibilites here..

        let parent = getParentOf(this.nativeInputElement)
        let source = Rx.DOM.mouseover(parent);
        source.subscribe( x => this.parentDivHasMouseHover = true) // this will be some toggling functionality.
    }

}

问题：

如果我有 formControl (myName = the_control) 对象，我如何访问本机元素？

有没有更好的方法在单独的组件中进行通知 - 并使其可重用？我已经在整个应用程序中成功地使用了它 - 显示错误和输入要求..

注意：我尝试首先使用主题标签语法 ​​(#myInput) 传递漏洞 html 输入，并在 show-notifications 组件中在那里形成，我尝试这样做：myInput.myName - 访问控件但我未定义。本机输入元素上不存在这些控件。我需要该控件进行验证:)

Answer 1

从根本上说，元素访问其兄弟元素的唯一方法是传递对它的引用。您可以为您的通知组件提供控件和表单的名称，并按照您的做法进行查找，但这是一个容易出错的过程。但是，我认为创建指令对解决您的情况更有帮助。您可以直接在输入上使用该指令。它允许您的代码像组件一样可重用，但因为它实际上是在输入上，所以它可以访问本机 html 元素。这是一个使用我编写的货币输入的示例，以了解该做什么。我为焦点事件添加了一个位置，以向您展示在哪里做事。显然，您想更改名称并使用小数管道擦除代码，但我将其留作参考。

@Directive({
  selector: '[appCurrencyInput]',
})
export class CurrencyInputDirective implements OnInit {
  @Input() runOnEveryModelChange = false;

  public reference: ElementRef<HTMLInputElement>;
  private numTimesRan = 0;
  constructor(el: ElementRef, private decimalPipe: DecimalPipe) {
    this.reference = el;
  }

  @HostListener('focus', ['$event'])
  private onFocus = (focusEvent: FocusEvent) => {
    //You could do showNotifications() here, have access to focusEvent if you want
  }

  @HostListener('ngModelChange', ['$event'])
  private onModelChange = (ngModelChangeEvent: number) => {
    this.numTimesRan++;
    if (this.runOnEveryModelChange || this.numTimesRan === 1) {
      const asNumber = this.decimalPipe.transform(ngModelChangeEvent, '1.2-2');
      this.reference.nativeElement.value = asNumber ? asNumber.replace(/,/g, '') : null;
    }
  };

  ngOnInit() {
    //here you could do something if you want, just like a component
  }
}

你会这样使用它

<input formControlName="myName" appCurrencyInput>

Answer 2

如果你想从 Abstractcontrol 获取一些信息，因为它是一个普通的 Html 输入元素，我发现了一些可能会有所帮助的东西，例如，如果你想向它添加一个“事件侦听器”，以便知道用户何时正在与元素交互，它可以通过使用 valueChanges 或 statusChanges 来完成，这两个 Observables 都来自 AbstractControl 类，我用它来知道元素何时发生变化并在提交表单之前选择选项以执行更多操作，我离开这是我的代码示例：

getValue() {
  this.myForm.get('myControlName').valueChanges.subscribe((optionValue) => {
    console.log(optionValue);
    this.doSomething(optionValue);
  });
}

如果你想在用户悬停父级时制作一些动画或更改，也许你可以使用一些简单的 css 技巧，如下所示：

.parent #child{
  opacity: 0;
}

.parent:hover #child{
  opacity: 1;
}

您可以查看此文档以获取更多详细信息：https://angular.io/api/forms/AbstractControl#valueChanges

Answer 3

这是非常基本的。 FormContrl 不是必需的。 您应该使用 # 和在输入元素上创建一个局部变量 将局部变量传递给方法

<div>
<label for="firstname">First Name</label>
<input name="fname" #nameFirst />
<label for="lastname">Last Name</label>
<input name="lname" #nameLast />
</div>
<button (click)="send(nameFirst , nameLast)">Submit</button>

export class HtmlExample {

    send(firstName: HTMLInputElement, lastName: HTMLInputElement): void {
        console.log(`Hello ${firstName.value}  ${lastName.value}`);
        firstName.value = '';
        lastName.value = '';
    }

}

Answer 4

我认为您可以使用# 表示法将元素传递给ShowNotificationsComponent：

export class ShowNotificationsComponent {
    @Input() the_control;
    @Input() elm;
    //...
}

然后在模板中：

<input formControlName="myName" #elm>
<show-notifications [the_control]="myName" [elm]="elm"></show-notifications>