[英]How to access value of the input box surrounded by ion-input directive
我是Ionic的新手。 我正在使用Ionic框架3。我的问题是我不知道如何访问由ion-input指令包围的输入值。 我想访问我创建的自定义指令的输入框的值。
ElementRef对获取输入框的值有帮助吗? 我尝试过但是失败了。 请引导我正确的方法来访问自定义指令中输入框的值。 下面是我的代码...
我的自定义指令代码 - 电话号码
import { Directive, HostListener, ElementRef } from '@angular/core';
/**
* Generated class for the PhonenumberDirective directive.
*
* See https://angular.io/api/core/Directive for more info on Angular
* Directives.
*/
@Directive({
selector: '[phonenumber]' // Attribute selector
})
export class PhonenumberDirective {
constructor(private element: ElementRef) {
console.log('Hello PhonenumberDirective Directive');
}
@HostListener('keydown', ['$event']) onkeydown(event) {
let inputValue = this.element.nativeElement.textContent;
// Here inputValue is undefined I am getting :-(
}
}
HTML代码
<ion-list inset>
<ion-item>
<ion-label floating>Mobile Number</ion-label>
<ion-input clearInput name="username" id="loginField" type="tel" required [(ngModel)]="lusername" #username="ngModel" maxlength="10" phonenumber></ion-input>
</ion-item>
<div [hidden]="username.valid || username.pristine" class="alert alert-danger">
Mobile number is required
</div>
</ion-list>
import { Directive, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[phonenumber]' // Attribute selector
})
export class PhonenumberDirective {
inputElement: any;
constructor(private element: ElementRef) {
console.log('Hello PhonenumberDirective Directive');
}
@HostListener('keydown', ['$event']) onkeydown(event) {
this.inputElement = this.element.nativeElement.getElementsByTagName('input')[0];
console.log(this.inputElement.value)
}
}
获取输入,然后从中获取值。
您可能还需要键盘输入
@HostListener('keyup', ['$event']) onkeydown(event)
获得最新的价值,但这取决于您的需求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.