Как получить доступ к значению поля ввода, окруженному директивой ion-input

Я новичок в Ионике. Я использую Ionic framework 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>

typescript angular ionic3 mobile-application angular-directive
person Sivakumar Tadisetti    schedule 09.02.2018    source источник
comment
пусть inputElement = this.element.getElementsByTagName('input')[0];   -  person Jamie    schedule 09.02.2018
comment
@ Джейми, спасибо за ответ. Я пробовал ваш ответ раньше. Но это касается доступа к элементу ввода, а не получения значения внутри него.   -  person Sivakumar Tadisetti    schedule 09.02.2018
comment
@SivakumarTadisetti, я не понимаю твой вопрос   -  person Mohan Gopi    schedule 09.02.2018
comment
Привет @MohanGopi, я создал одну настраиваемую директиву с именем phonenumber и назначил ее одному из полей ввода в моей форме. Поэтому всякий раз, когда пользователь выполняет событие нажатия клавиши, я хочу получить доступ ко всему вводу, присутствующему в поле ввода. Но я получаю неопределенность, как вы можете видеть в моем коде, опубликованном вместе с вопросом.   -  person Sivakumar Tadisetti    schedule 09.02.2018

Ответы (1)


arrow_upward
3
arrow_downward 

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

}

Получите ввод, а затем получите доступ к значению из этого.

Вы также можете использовать keyup

 @HostListener('keyup', ['$event']) onkeydown(event)

Чтобы получить последнее значение, но это зависит от ваших потребностей.

person Jamie    schedule 09.02.2018
comment
Спасибо @Jamie, ваш ответ стал решением моей проблемы. И да, keyup также помог мне получить последнее значение - person Sivakumar Tadisetti; 09.02.2018