angular – 如何在设置或获取之前拦截FormControl的值？

发布时间：2020-12-17 18:10:38 所属栏目：安全来源：网络整理

导读：这个问题非常明显.我想拦截FormControl的value属性的传入值,并能够截取它连接到的 HTML控件的传出值. 假设我有一个名为“firstName”的FormControl,我把它连接到一个文本框,如下所示： input type="text" formControlName="firstName" / 默认情况下,当用户在

这个问题非常明显.我想拦截FormControl的value属性的传入值,并能够截取它连接到的 HTML控件的传出值.

假设我有一个名为“firstName”的FormControl,我把它连接到一个文本框,如下所示：

<input type="text" formControlName="firstName" />

默认情况下,当用户在文本框中输入值并提交时,FormControl的值将设置为文本框中的值.有没有什么方法可以拦截设置的值并在设置之前修改它？

同样,有没有办法拦截FormControl发送到HTML控件的值？例如,如果我将FormControl的值设置为某些内容,但我想修改文本框中显示的值.

我知道我可以使用ngModel充当表单和控件之间的中介,但是当使用多个控件时,这会变得很麻烦.我也知道你可以创建自己的控件并实现ControlValueAccessor,但这也很麻烦,因为我必须为我想要使用的每个控件创建一个相应的控件.

有关我提出此问题的原因的详细信息,请参阅https://github.com/ionic-team/ionic/issues/7121

解决方法

您可以使用onBlur来调用函数(即modifyValue()),然后利用patchValue来修改值：

<input type="text" onblur="modifyValue()" formControlName="firstName" />

modifyValue() {
    this.form.patchValue({
      firstName: this.form.firstName //modify firstName here
    })
}

如果可行,您可以创建一个通用函数并传递键/值以便对其进行修补,而无需创建一堆特定函数

<input type="text" onblur="modifyValue('firstName')" formControlName="firstName" />

  modifyValue(key) {
      this.form.controls[key].patchValue(this.form.controls[key] // modify value here)
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!