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

我正在使用Angular 2.0 final release。如何使用Angular 2.0中的formControl访问Native HTML Input元素

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

从父母（div）这样做很容易。 Just（focus）= showNotifications（）+ ngIf - 并完成作业。

但我想封装节目的通知组件内部此功能 - 并使其可重复使用..

由于我使用@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..]) 
}

显示，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>

显示，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）对象？

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

注意：我试图首先使用hashtag语法（#myInput）传递hole html输入，然后在show-notifications组件，我试图做：myInput.myName - 访问控制，但我得到未定义。本地输入元素上不存在控件。我需要验证:)

来源

2016-09-29 AIon

一种选择是创建一个自定义表单控件。您可以让用户通过#input传递HTML，以便将其绑定到要使用的“ControlValueAccessor”字段。 –

我想你可以使用#符号的元素传递给ShowNotificationsComponent对照：然后在模板

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

：

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

来源

2016-09-30 09:09:13 martin

是@Martin，感谢您的回答，我已经做到了，并且工作正常，但仍然在等待一个解决方案，该解决方案允许我访问控件中的本地元素窗体。我不相信他们没有以某种方式连在一起。形成原生输入元素，我无法获得控制权。从控制我不能得到本地元素。这怎么可能？这听起来不对。我需要在我的代码中创建所有这些＃变量。不干净。但是，是的，现在的作品:) – AIon

好吧，如果你看看“FormControl”和“AbstractControl”的源代码，它实际上不会访问任何地方的本地元素。请参阅https://github.com/angular/angular/blob/2.1.0-beta.0/modules/%40angular/forms/src/model.ts#L76-L608和https://github.com/angular/ angular/blob/2.1.0-beta.0/modules /％40angular/forms/src/model.ts＃L608-L798 – martin

所以我不完全确定，但不是nativeElement的'name'属性'模板驱动窗体中使用什么来命名FormGroup中的FormControl？如果是这样的话（使用你最喜欢的DOM选择器，我选择jQuery，因为它是我头顶上的知识）执行以下操作...'var element = $（'[name = {{yourInputName}}]'）;'在此之后，您应该可以将其作为标准输入表单元素进行访问。 – Jarvis

这是非常基本的。 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 = ''; 
    } 

}

来源

2017-05-11 12:39:37

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

回答

相关问题