清除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()函数有效,但只有一次.

请检查我的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运行更改检测,绑定工作,值应更改.

看到与之相同的工作实例 ngModel

Working Example with ngModel

Answer 3

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

在stackblitz上尝试清除 FormGroup中的输入

Answer 4

方法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 5

这是反应形式的解决方案。那么就不需要使用@ViewChild装饰器了：

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