代码之家 › 专栏 › 技术社区 › Vladimir Humeniuk

如何检查表单中的值是否已从初始值更改

angular-forms angular-reactive-forms angular

Vladimir Humeniuk · 技术社区 · 6 年前

  this.userInfoForm = this.formBuilder.group({
      displayName: [this.user.displayName, [
        Validators.required,
      ]],
    })

如何检查,输入中的初始值是否改变?因为当我使用 userInfoForm.dirty 它返回true,即使我从值中删除1个符号,然后再添加回来。

0 回复 | 直到 6 年前

Prashant Pimpale Dila Gurung 6 年前

我想这样做,会用的 valueChanges() 表格控制方法 valueChanges 更新实例变量或执行操作。

intialValue: any; // Define one property to store the initial value of the control

this.intialValue = this.userInfoForm.get('displayName').value; // Store initial value

// and then subscribe to valueChanges method of FormControl to get the latest value
this.userInfoForm.get('displayName').valueChanges.subscribe(value => {
  console.log('Intital Value', this.intialValue)
  console.log('New Value', value);
})

Working Demo

Drenai 6 年前

form.value 在创建之后,使用- this.initialFormValue = JSON.stringify(this.form.value)

每当您想检查表单是否已更改时(例如在提交时),请获取当前值, JSON.stringify(this.form.value) this.initialFormValue

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前