Angular formControl表单应用：清除input输入框中的值value

Posted 2021-07-17 Kabukiyo Lin

Angular 表单formControl应用：清除input输入框中的值value

• 需求描述
• 代码实现

需求描述

这次做的是一个与angular formControl表单相关的需求。
用户操作顺序如下：

1. 有一个input输入框
2. 用户在input中输入内容
3. 点击一个button
4. 保存当前内容，并提交至DataBase
5. 清空input输入框中的value，以供下一次输入。

这样的需求很合理。因为在第一次输入后，用户存在后续第二次或者第三次甚至更多次输入提交操作的可能。但总不可能说去不断刷新页面加载一个新的表单，这样不断请求和加载，开销大，用户也需要等待一次刷新加载的时间。

所以，完全可以在给用户一定的提示后（如显示“提交成功”），便自动清除input输入框中的值。

代码实现

输出input中的value

// 输出原本input输入框的值
//'keyName'是formControl表单的关键字，用于确定某个formControl表单。这里输出的是keyName的value
console.log(this.frmCtrls['keyName'].value);

清除input中的value

// clear the value of 'keyName' input 
// one way to finish this requirement when I tried at the firts time(not recommend)
this.frmCtrls['keyName'].value = "";
// 直接给value赋值，是不是感觉不太好

正确操作

//使用formControl的setValue方法
this.frmCtrls['keyName'].setValue("");