需求描述
这次做的是一个与angular formControl表单相关的需求。
用户操作顺序如下:
- 有一个input输入框
- 用户在input中输入内容
- 点击一个button
- 保存当前内容,并提交至DataBase
- 清空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("");