Ответ 1

1. Первый метод

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

this.searchValue = null;
//or
this.searchValue = ' ';

Рабочий Plunker

потому что из angular не обнаружено никакого события. поэтому вам нужно присвоить какое-либо значение либо null, либо string с пробелом

2. Второй метод

• использование [(ngModel)] должно работать с ngModel.

почему?

потому что, как вы связались с атрибутом value, который является только привязкой к свойствам, а не привязкой события. так angular не запускает обнаружение изменений, поскольку ни одно событие, относящееся к angular, не запускается. Если вы привязываетесь к событию, тогда angular запускает обнаружение изменений, а работы привязки и значение должны быть изменены.

см. рабочий пример с ngModel

Рабочий пример с ngModel

Ответ 2

Вы можете просто изменить ссылку на входное значение, как показано ниже

<div>
    <input type="text" placeholder="Search..." #reference>
    <button (click)="reference.value=''">Clear</button>
</div>

Ответ 3

Способ 1.

Использование `ngModel`.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Search..."  [(ngModel)]="searchValue">
      <button (click)="clearSearch()">Clear</button>
    </div>
  `,
})
export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = null;
  }
}

Код плунжера: Plunker1

Способ 2.

Использование пустого значения вместо пустых кавычек.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Search..." [value]="searchValue">
      <button (click)="clearSearch()">Clear</button>
    </div>
  `,
})
export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = null;
  }
}

Код плунжера: Plunker2

Ответ 4

Есть два дополнительных способа сделать это кроме двух методов, упомянутых в ответе @PradeepJain.

Я бы предложил не использовать этот подход и использовать его только в качестве крайней меры, если вы не используете директиву [(ngModel)] а также не используете привязку данных через [value]. Прочитайте это для получения дополнительной информации.

Использование ElementRef

app.component.html

<div>
      <input type="text" #searchInput placeholder="Search...">
      <button (click)="clearSearchInput()">Clear</button>
</div>

app.component.ts

export class App {
  @ViewChild('searchInput') searchInput: ElementRef;

  clearSearchInput(){
     this.searchInput.nativeElement.value = '';
  }
}

Использование FormGroup

app.component.html

<form [formGroup]="form">
    <div *ngIf="first.invalid"> Name is too short. </div>
    <input formControlName="first" placeholder="First name">
    <input formControlName="last" placeholder="Last name">
    <button type="submit">Submit</button>
</form>
<button (click)="setValue()">Set preset value</button>
<button (click)="clearInputMethod1()">Clear Input Method 1</button>
<button (click)="clearInputMethod2()">Clear Input Method 2</button>

app.component.ts

export class AppComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });
  get first(): any { return this.form.get('first'); }
  get last(): any { return this.form.get('last'); }
  clearInputMethod1() { this.first.reset(); this.last.reset(); }
  clearInputMethod2() { this.form.setValue({first: '', last: ''}); }
  setValue() { this.form.setValue({first: 'Nancy', last: 'Drew'}); }
}

Попробуйте это на стекблице Очистка ввода в FormGroup

Ответ 5

HTML

<input type="text" [(ngModel)]="obj.mobile" name="mobile" id="mobile" class="form-control" placeholder="Mobile/E-mail" />

TS

onClickClear(){
   this.obj.mobile= undefined;
}

Ответ 6

вы должны использовать this.searchValue = null