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

我有一个表单输入，我想在单击按钮时使其模糊（去聚焦）并清空

在AngularJS中，我在控制器中这样做：

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

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

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

但我不想使用jQuery。正确的方法是什么

以下是整个组件：

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

  };

}

---

您可以使用

NgForm

s

reset

方法：

@ViewChild(NgForm)
public form:NgForm;


form.reset(<value>);

@ViewChild（NgForm）
公共形式：NgForm；
form.reset（）；

---

此外，也不需要模糊，因为您正在单击按钮，它将获得焦点，如果不需要，请设置按钮的

tabindex

属性。

相同的方法，但使用普通JS函数将是

const ele=document.getElementById（“搜索输入”）；ele.blur（）；ele.value=“”

我从webpack（和tslint）得到一个错误：

属性'value'在类型'HTMLElement'上不存在。

是的，typescript无法知道

getElementById

函数将返回哪种类型的元素（如果有的话），因此您必须通过强制转换到正确的元素类型来给它一点提示。如果它是一个输入元素，您可以使用它们键入

HTMLInputElement

，因此代码看起来像

const ele=document.getElementById（“搜索输入”）作为HTMLInputElement使用反应式表单。然后可以使用markaAsPristine、markAsdirty等方法。。