Angular 2属性指令清除文本框？

使用Angular 2.1.0 ... 我正在处理一个指令，该指令应用于文本框时显示文本框右侧的“X”，单击时此“X”应从文本框中删除文本，清除模型，类似于这个angularjs回购https://github.com/amageed/angular-resetfield。Angular 2属性指令清除文本框？

我的问题是我可以将输入值传递给指令，但我无法清除模型。现在在我的清除功能我得到：TypeError: Cannot read property 'emit' of undefined

我承认，我可能会在这个完全错误的方法，我愿意接受任何建议。

下面是我原本计划在HTML中使用它：

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

这里是我的指令：

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

编辑：我后的效果是这样的：

for re-usability，我试图创建一个属性指令来处理这个所有rol导致了。

来源

2017-02-21 Jay Culpepper

此行'searchIcon.addEventListener（ '点击'，this.clearValue）;'应该是'searchIcon.addEventListener（”点击'，（）=> this.clearValue（））;' – admax

你可以，如果你想获得真正的阐述，但这个东西：

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

来源

2017-02-21 19:10:14 mickdev

感谢您的回复。我更新了我的问题。我知道我可以像你所建议的那样做，但我试图在清除文本框的同时实现特定的外观。在我看来，符合一个属性指令。 –

你想要的效果只是一个CSS样式。以下是bootstrap 3的示例：http://stackoverflow.com/a/22375617/7447071即使您创建了一个指令，您也必须执行相同的样式才能获得所需的效果。无论如何，你可以创建一个指令，但如果需要的话，你可以在这里做一个回退:) – mickdev

Angular 2属性指令清除文本框？

回答

相关问题