Angular 2 - 使用自定义验证器验证表单的值是否已从其默认值更改

Question

我的表格预填了user.email。如果用户使用原始user.email 以外的值填充FormControl 的字段，我希望仅启用编辑按钮。是否可以使用自定义验证器来做到这一点？

这是我的验证器：

import { FormControl } from  '@angular/forms';

export class ChangedValidator {
   static isValid(control: FormControl): any {
     let initialValue = (' ' + control.value).slice(1);

     if(initialValue === control.value){
            return {
                "changed": true
            };
        }
      return null;
   }
}

目的是克隆FormControl.value，但我意识到每次在FormControl中更改值时都会实例化这个类。

编写不可重用代码的一种非常hacky的方法是从存储它的数据provider中获取user.email，并使用它与FormControl.value进行比较。正如您可能猜到的那样，验证器仅适用于 User 对象的参数，而不适用于其他任何参数。

我想写一个通用的Validator 来检查表单的当前值是否与初始化的值不同。

编辑：

这是使用pristine 的一种方法，但并不完美。

import { FormControl } from  '@angular/forms';

export class ChangedValidator { 
   static isValid(control: FormControl): any {

     if(control.pristine){
            return {
                "unchanged": true
            };
        }
      return null;
   }
}

Answer 1

如果您需要检查事物是否与初始值相比发生了变化，而不仅仅是控件不再是原始的；如，它可以返回到它的初始值并且你不想要错误，那么你可以实现一个验证函数，如下所示：

static isValid = (initialValue: any): any => {
  return(control: FormControl) => {
   console.log(control.value);

     if(JSON.stringify(initialValue) !== JSON.stringify(control.value)) {
       return {
              "changed": true
          };
     }
    return null;
  }
}

请注意，这是 quick and dirty object check，custom validators with parameters 上已经有答案，custom validation as a function factory 上已经有解释，但细节上有点薄。

forbiddenNamevalidator 工厂返回配置的验证器 功能。该函数接受一个 Angular 控制对象并返回 如果控件值有效，则为 null 或验证错误 目的。验证错误对象通常具有一个属性，其 name 是验证键 ('forbiddenName')，其值为 我们可以插入到错误中的任意值字典 消息（{name}）。

这是playground