Question

我在Angular 7应用中具有反应形式：

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

如何检查，输入的初始值是否已更改？因为当我使用userInfoForm.dirty时，即使我从值中删除1个符号然后再添加回去，它也会返回true。

Answer 1

执行此操作的一种方法是在创建form.value表单后获取其值，并使用-this.initialFormValue = JSON.stringify(this.form.value)

进行保存。

每当您要检查表单是否更改时，例如提交后，获取当前值JSON.stringify(this.form.value)并与this.initialFormValue

进行比较

您无法通过比较原始模型和form.value来可靠地进行测试，因为在许多情况下，模型上的数字将作为字符串返回，并且基础对象的表单顺序可能与模型不同

我还没有测试过，但是理论上它应该可以工作！

Answer 2

我会这样做，将使用FormControl的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

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

2 个答案: