Angular：在没有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属性。