javascript - Angular:在没有 jQuery 的情况下单击时模糊并清空表单字段？

Question

我有一个表单输入，我想在单击按钮时模糊(散焦)并清空。

在 AngularJS 中，我在 Controller 中这样做:

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 的 reset 方法:

@ViewChild(NgForm)
public form:NgForm;


form.reset(<value>);

也不需要模糊，因为你点击按钮，它会获得焦点，如果没有，设置按钮的 tabindex 属性。