角度:在没有jQuery的情况下单击时模糊并清空表单字段

Question

我有一个表单输入，我想在单击按钮时将其blur（取消焦点）并清空。

在 AngularJS 中，我在控制器中做了这样的事情：

angular.element('#search-input').val('');
angular.element('#search-input').blur();

在 Angular （4.4.4） 中，我让它像这样工作：

$('#search-input').val('');
$('#search-input').blur();

但我宁愿不使用jQuery。 在 Angular 中执行此操作的正确方法是什么？

这是整个组件：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'pb-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit {
  private searchActive: boolean;
  constructor() {
    this.searchActive = false;
  }
  ngOnInit() {
  }
  toggleSearch = function () {
    if (this.searchActive) {
      this.searchActive = false;
      $('#search-input').val('');
      $('#search-input').blur();
    } else {
      this.searchActive = true;
    }
  };
}

Answer 1

您可以使用

NgForm s reset方法：

@ViewChild(NgForm)
public form:NgForm;

form.reset(<value>);

也不需要模糊，因为您正在单击按钮并且它会获得焦点，如果没有，请设置按钮tabindex属性。