在Angular 4中提交表单后清除输入框

在Angular 4中，可以通过以下步骤来实现在提交表单后清除输入框的功能：

1. 首先，在组件的HTML模板中，使用双向数据绑定将输入框与组件中的属性绑定起来。例如，使用[(ngModel)]指令将输入框与组件中的一个属性inputValue绑定起来：

<input type="text" [(ngModel)]="inputValue">

1. 在组件的类中，定义一个方法来处理表单的提交事件。在该方法中，可以执行提交表单的逻辑，并在适当的时候清空输入框的值。例如，定义一个submitForm()方法：

submitForm() {
  // 执行提交表单的逻辑
  // ...

  // 清空输入框的值
  this.inputValue = '';
}

1. 在组件的HTML模板中，使用ngSubmit指令将表单的提交事件与上述定义的submitForm()方法绑定起来。同时，使用ngForm指令给表单添加一个引用，以便在提交事件中调用表单的reset()方法来重置表单的状态。例如：

<form (ngSubmit)="submitForm()" #myForm="ngForm">
  <input type="text" [(ngModel)]="inputValue" name="inputField">
  <button type="submit">提交</button>
</form>

1. 最后，可以在提交表单后调用表单的reset()方法来重置表单的状态，并清空输入框的值。在submitForm()方法中，添加以下代码：

submitForm() {
  // 执行提交表单的逻辑
  // ...

  // 清空输入框的值
  this.inputValue = '';

  // 重置表单的状态
  myForm.resetForm();
}

这样，在Angular 4中，当用户提交表单时，输入框的值将被清空，并且表单的状态将被重置。

关于Angular 4的更多信息和详细介绍，可以参考腾讯云的相关产品和文档：

• Angular 4官方文档：https://angular.io/docs
• 腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb