Angular HTML Giriş öğesine, Angular 2.0 formControl kullanarak erişme

Question

Angular 2.0 son sürümünü kullanıyorum.

Ne yapmak isterim? - Yalnızca giriş neticesinde bazı bildirimler (uyarılar, girdinin gereksinimleri) göstermek istiyorum. Veya daha da iyisi, ebeveyninin (the div) mouse hover etkinliğine sahip olması.

Bunu ebeveynten yapmak (div) kolaydır. Sadece (odak) = showNotifications() + an ngIf - ve iş bitti.

Ama gösteri bildirimleri bileşeni içinde bu işlevleri kapsülleyen istiyorum - ve yeniden kullanılabilir hale ..

i @Input() kullanılarak show-bildirimlerin içindeki the control geçmesi göz önüne alındığında - ı eğer bu şeyler her ikisini de native HTML input element'a erişebilirim. show-notifications.component.ts'da nasıl olduğunu görebilirsiniz.

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:

İşte kod

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

} 

Soru: i formControl (myName = the_control) nesne var olduğu göz önüne alındığında yerli eleman erişmek nasıl

?

Bildirimleri ayrı bir bileşende daha iyi bir şekilde yapmak ve yeniden kullanılabilir hale getirmek için daha iyi bir yol var mı? Ben zaten tüm uygulama boyunca - hataları ve giriş gereksinimlerini göstermek için bu başarılı bir şekilde kullanıyorum ..

Not: Ihtiyacım olan hhml girişini ilk önce hashtag sözdizimini (#myInput) kullanarak ve gösterme bildirimi bileşeninin içinde formu oluşturmaya çalıştım. , ben yapmaya çalıştım: myInput.myName - denetimi erişir ama undefined olsun. Kontroller doğal giriş elemanında mevcut değildir. Bu çok temel bir

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

Answer 1

Sana ShowNotificationsComponent için eleman geçmesi # notasyonu kullanmak düşünüyorum için bu denetimi ihtiyaç . FormContrl gerekli değildir. Eğer

<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 2

:

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

Sonra şablonunda: Ve doğrulama :)