如何使用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元素

回答

相關問題