ion-input 안드로이드 작동

ionic serve를 이용한 웹 버전에서는 아무런 문제가 없던 기능이

android에서 작동하면 의도와는 다르게 데이터가 바인딩이 안되는 경우가 있었습니다.

 

안드로이드에서는 Ion-input 태그가 의도와는 다르게 작동하는 것을 발견하였습니다.

 

제가 추측하기에는 안드로이드의 경우,

ion-input > input 태그의 값을 가져오도록 설정되어 있는것 같습니다.

 

ion-input아래 input태그 화면

캐패시터에서 바인딩을 어떤식으로 해주는지 몰라서 여러 시도를 해보았습니다.

결국 dom을 만질 때 처럼 직접 element의 attr을 접근해야 했습니다.

constructor(private el: ElementRef) {}

  onkeyup() {
    const _el = this.el.nativeElement.firstElementChild;
    if (_el.value != _el.value.trim() || !this.isHHmm(_el.value)){
      this._removeLastString(_el);
      return;
    }
    if (_el.maxLength < _el.value.length) {
      this._removeLastString(_el);
      return;
    }
  }

constructor 불러올 때, Element로 반인딩 합니다.

 

ion-input태그는 nativeElement입니다.

input은 firstElementChild입니다.

 

위 사진과 같이 저는 input child로 되어 있기 때문에 firstElementChild를 사용했습니다.

 

그럼 input에 직접 접근할 수 있게 됩니다.

value의 값을 가져오고, 직접 수정할 수 있습니다.