清除Angular2中的输入文本字段

Question

当我尝试清除文本字段时，为什么此方法不起作用？

<div>
      <input type="text" placeholder="Search..." [value]="searchValue">
      <button (click)="clearSearch()">Clear</button>
</div>


export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = '';
  }
}

我期待的是：由于我传递了搜索值的属性，当我点击按钮时，它应该获得在clearSearch()函数中处理的更新值。

我还注意到，如果我将默认值设置为searchValue，clearSearch()函数可以正常工作，但只能运行一次。

请check my plunker。

Answer 1

您只需更改输入值的引用，如下所示

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

Answer 2

1。第一种方法

你必须在这里指定null或空字符串

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

Working Plunker

因为角度变化检测没有触发任何事件。所以你必须指定一些值为null或带空格的字符串

2。第二种方法

• 使用[(ngModel)]它应该与ngModel一起使用。

  为什么？

因为你绑定了value属性，它只是属性绑定而不是事件绑定。所以 angular不会运行更改检测，因为没有触发与Angular相关的事件。如果绑定到事件，则Angular运行更改检测，绑定工作，值应该更改。

查看与ngModel

相同的工作示例

Working Example with ngModel

Answer 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;
  }
}

  

Plunker代码： 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;
  }
}

  

Plunker代码： Plunker2

Answer 4

除了@PradeepJain的答案中提到的两种方法外，还有两种其他方法可以做到这一点。

如果您不使用[(ngModel)]指令，也不使用通过[value]的数据绑定，则我建议不要使用这种方法，并且只能作为最后的选择。阅读this了解更多信息。

使用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'}); }
}

在stackblitz Clearing input in a FormGroup上尝试一下

Answer 5

这是反应形式的解决方案。则无需使用 @ViewChild 装饰器：

  clear() {
    this.myForm.get('someControlName').reset()
  }

Answer 6

这样的东西，没有按钮呢：

<input type="text" placeholder="Search..." [value]="searchValue" onblur="this.value=''">

Answer 7

HTML

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

TS

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

Answer 8

模板驱动方法

#receiverInput="ngModel" (blur)="receiverInput.control.setValue('')"

Answer 9

一些答案​​建议做以下事情

this.myForm.get('fieldName').reset();

虽然效果很好，但我个人喜欢直接访问字段对象，而不是进行基于字符串的查找。

this.myForm.controls.fieldName.reset();

Answer 10

Angular 和 Ionic 中的反应形式：

在library.page.html中：

<ion-input type="text" placeholder="Search" [formControl]="searchControl"></ion-input>
<ion-icon name="close-circle" (click)="clearSearchInput()"></ion-icon>

在library.page.ts中：

clearSearchInput() {
  this.searchControl.patchValue(false);
}

Answer 11

你应该使用this.searchValue = null