2017-02-21 2 views
0

Using Angular 2.1.0 ... 텍스트 상자에 적용 할 때 텍스트 상자 오른쪽에 "X"가 표시되면이 "X"를 클릭하면 텍스트 상자에서 텍스트가 삭제되어야한다는 지시문을 작성 중입니다. 이 angularjs repo와 비슷한 모델을 지우십시오. https://github.com/amageed/angular-resetfield.텍스트 상자를 지우는 각도 2 속성 지시문?

문제점은 지시문에 입력 값을 전달할 수 있지만 모델을 지울 수 없다는 것입니다. 이제 내 clearFunction에서 나는 다음과 같이 나타납니다. TypeError: Cannot read property 'emit' of undefined

나는 이것이 완전히 잘못된 접근 방식으로 진행될 수 있음을 알고 있으며, 어떤 제안도하고 있습니다.

@Directive({ 
/* tslint:disable */ 
selector: '[inputClear]', 
exportAs: 'inputClear' 
}) 

export class inputClearDirective implements OnInit, OnChanges { 

@Input() inputClear: any; 
@Output() inputClearChange = new EventEmitter(); 
constructor(private renderer: Renderer, private el: ElementRef) { 
} 

ngOnChanges(change) { 
    console.log('val', this.inputClear); 
    if (this.inputClear) { 
     console.log('show'); 
     this.showElement(); 
    } 
    if (!this.inputClear) { 
     this.hideElement(); 
     console.log('hide'); 
    } 
} 
//on Init add x to text box 
ngOnInit() { 
    let me = this.el.nativeElement as HTMLInputElement; 
    if (me.nodeName.toUpperCase() !== 'INPUT') { 
     throw new Error('Invalid input type for clearableInput:' + me); 
    } 
    let wrapper = document.createElement('span') as HTMLSpanElement; 
    let searchIcon = document.createElement('i') as HTMLElement; 
    searchIcon.id = 'searchIcon'; 

    // // calls the clearvalue function 
    searchIcon.addEventListener('click', this.clearValue); 

    ////clears the textbox but not the model 
    // searchIcon.addEventListener('click', function() { 
    //  console.log('clicked'); 
    //  let inp = this.parentElement.previousSibling as HTMLInputElement; 
    //  if (inp && inp.value.length) { 

    //   inp.value = ''; 
    //  } 

    // }); 
    wrapper.setAttribute('style', 'margin-left: -37px;position: relative; margin-right:37px;'); 

    searchIcon.setAttribute('style', 'display:none'); 
    searchIcon.className = 'fa fa-times fa-1x'; 
    wrapper.appendChild(searchIcon); 
    wrapper.id = 'searchSpan'; 

    me.insertAdjacentElement('afterend', wrapper); 
} 

showElement() { 
    let searchIcon = document.getElementById('searchIcon'); 
    if (searchIcon) { 
     searchIcon.removeAttribute('style'); 
    } 
} 

hideElement() { 
    let searchIcon = document.getElementById('searchIcon'); 
    if (searchIcon) { 
     searchIcon.setAttribute('style', 'display:none'); 
    } 
} 

clearValue() { 
    console.log('clicked'); 
    this.inputClear = ''; 
    this.inputClearChange.emit(this.inputClear); 
} 
} 

편집 : 여기

<input type="text" placeholder="Search" [(ngModel)]="filterText" [(inputClear)]="filterText">

내 지시어이다 : 나는 후 오전 효과가이 같은 것입니다 여기에

내가 원래 HTML에 사용 계획입니다 : enter image description here

다시 사용할 수 있도록이 모든 rol 처리 할 특성 지시문을 만들려고했습니다. 주도했다.

+0

이 줄'searchIcon.addEventListener이 (this.clearValue를 '클릭'); '는'('searchIcon.addEventListener해야한다 ',() => this.clearValue());' – admax

답변

0

당신은 당신이 원하는 경우에 뭔가 정말 정교하게 만들 수 있지만, 이것에 대해 무엇을 :

<input #searchBox id="search-box" placeholder="Search"/> 
<button (click)="searchBox.value = null"> 
    X 
</button> 
+0

답장을 보내 주셔서 감사합니다. 나는 내 질문을 업데이트했다. 나는 당신이 제안한 것처럼 그것을 할 수있는 이해하지만, 나는 텍스트 상자를 쉽게 지울 수 있도록하면서 특정 모양을 얻으려고합니다. 그것은 속성 지시어와 일치하는 것으로 보였다. –

+0

원하는 효과는 CSS 스타일링에 불과합니다. 다음은 부트 스트랩 3을 사용한 예입니다. http://stackoverflow.com/a/22375617/7447071 지시어를 만들지 만 원하는 효과를 얻으려면 동일한 스타일을 사용해야합니다. 어쨌든 지시어를 만들 수 있지만 필요하면 여기에 대체 기호가 있습니다. :) – mickdev