Reset входное значение в angular 2

У меня есть следующее поле ввода:

<input mdInput placeholder="Name" #filterName name="filterName" >

Я хочу очистить значение при нажатии кнопки очистки:

<button (click)="clearFilters()">Clear</button>

Функция

app.component.ts :

filterName : string = null;
clearFilters() {

this.filterName = '';
}

Пожалуйста, дайте мне знать, что не так с выше, поскольку это не работает для меня.

Здесь jsfiddle https://jsfiddle.net/8fw8uq3x/

Ответы

Ответ 1

вы можете сделать что-то вроде этого

    <input  placeholder="Name" #filterName name="filterName" />
    <button (click) = "filterName.value = ''">Click</button>

или

Шаблон

<input mdInput placeholder="Name" [(ngModel)]="filterName" name="filterName" >
<button (click) = "clear()'">Click</button>

В компоненте

filterName:string;
clear(){
this.filterName = '';
}

Обновление

Если это форма

самый простой и чистый способ очистить формы, а также их состояния ошибок (грязные, престинные и т.д.)

this.form_name.reset();

для получения дополнительной информации о формах, читаемых здесь

https://angular.io/docs/ts/latest/guide/forms.html

PS: Как вы задали вопрос, в вашем вопросительном коде нет формы вы используете простую двухдневную привязку данных, используя ngModel, не используя FormControl.

Метод form.reset() работает только для formControls reset call

Плункер, чтобы показать, как это будет работать ссылка.

Ответ 2

Используйте @ViewChild to reset свой контроль.

Шаблон:

<input mdInput placeholder="Name" #filterName name="filterName" >

В коде:

@ViewChild('filterName') redel:ElementRef;

то вы можете получить доступ к своему управлению как

this.redel= "";

Ответ 3

Я знаю, что это старый поток, но я просто споткнулся.

Итак, как бы я это сделал, с вашей локальной переменной шаблона в поле ввода вы можете установить значение ввода, как показано ниже

<input mdInput placeholder="Name" #filterName name="filterName" >

@ViewChild() input: ElementRef

public clear() {
    this.input.NativeElement.value = '';
}

Довольно уверен, что это не вернет форму обратно в нетронутую, но вы можете reset это в той же функции, используя функцию markAsPristine()

Ответ 4

Вы должны использовать двустороннюю привязку. Нет необходимости иметь ViewChild, поскольку он тот же компонент.

Итак, добавьте ngModel для ввода и оставьте остальные. Здесь отредактированный код.

<input mdInput placeholder="Name" [(ngModel)]="filterName" name="filterName" >

Ответ 5

Вы можете использовать event.target.result, чтобы сбросить входные данные непосредственно от компонента.

event.target.value = ""

Ответ 6

Для сброса значения в angular 2 используйте:

this.rootNode.findNode("objectname").resetValue();