如果表单仍然相同，则阻止用户提交表单答案

【问题标题】：Prevent user from submitting form if form is still the same如果表单仍然相同，则阻止用户提交表单
【发布时间】：2020-10-02 21:54:06
【问题描述】：

所以我想阻止用户在表单未被触及/仍然相同的情况下提交表单。该表单有一个提交按钮，单击该按钮会调用我的submitChanges() 函数。这就是我的函数在 TS 中的样子。

submitChanges() {
// Do nothing if the form is still the same
if (!this.myForm.dirty || this.myForm.invalid) {
   return;
}

else
//...submit the form...
}

问题：在我在表单中输入内容并退格之前，逻辑似乎正常工作。它认为表单仍然很脏，即使我退格了我输入的所有内容，所以问题是表单如何知道它不再脏，因为输入已被删除（退格）？

【问题讨论】：

标签： angular angular7

【解决方案1】：

您可以创建一个方法并在焦点输出上执行此操作：

if(this.form.controls.formControl.value === '') {
   this.formControl.markAsPristine();
   this.formControl.markAsUntouched();
}

这将阻止您提交表单。我还建议使用[disabled] 属性来防止用户在表单无效时点击按钮。

【讨论】：

在具有“原始值”的控件中不会阻止，例如123，使用了退格键（值为12）点击3，（再次值为123）
另请注意，表单具有可以更改的预先存在/原始值。这是用户想要进行更改/更新时弹出的表单。

【解决方案2】：

只有你自己制作了一个自定义表单验证器

  isEqual(value:string)
  {
    return (control)=>{
      return control.value==value?{error:'must be different to '+value}:
                            null
    }
  }

你使用like，例如

  control=new FormControl('one',this.isEqual('one'))

见this stackblitz

【讨论】：