Angular Form Validations - 值必须与初始值不同

Question

我的响应式(Reactive)表单验证设置如下:

  ngOnInit(): void {
    this.userForm = this.formBuilder.group({
      status: {checked: this.selectedUser.status == 1},
      username: [this.selectedUser.username, [Validators.required, Validators.minLength(LlqaConstants.USERNAME_MIN_LENGTH)]],
      realname: [this.selectedUser.realname, [Validators.required, Validators.minLength(LlqaConstants.REALNAME_MIN_LENGTH)]],
      password: ['', this.selectedUser.passhash.length > 0 ? [Validators.required, Validators.minLength(LlqaConstants.PASSWORD_MIN_LENGTH)] : null],
      usercomment: [this.selectedUser.comment]
    });
  }

我想启用提交按钮，只要一个输入值不再等于初始值。我能找到的最简单的方法是:

disableSaveButton(): boolean {
  return !this.userform.dirty || this.userForm.invalid;
}

我的问题是 dirty 属性，只要我输入一些东西，dirty 就是真的，如果我输入与初始值相同的值也是如此。我想要一个属性，告诉我 one 输入值是否不等于初始值。这是开箱即用的，还是我必须检查每个 userForm.value 是否等于 this.selectedUser.someValue？

Answer 1

我创建了一个自定义验证器来解决这个问题。

验证器:

export function oneValueHasToBeChangedValidator(values: { controlName: string, initialValue: string | number | boolean }[]): ValidatorFn {
  return (form: FormControl): { [key: string]: any } => {
    let sameValues = true;

    for (let comparingValues of values) {
      if (form.value[comparingValues.controlName] != comparingValues.initialValue) {
        sameValues = false;
        break;
      }
    }

    return sameValues ? {'sameValues': {values: values}} : null;
  };
}

我是如何使用它的:

this.userForm = this.formBuilder.group({
  status: this.selectedUser.status == 1,
  username: [this.selectedUser.username, [Validators.required, Validators.minLength(LlqaConstants.USERNAME_MIN_LENGTH)]],
  realname: [this.selectedUser.realname, [Validators.required, Validators.minLength(LlqaConstants.REALNAME_MIN_LENGTH)]],
  password: ['', [Validators.minLength(LlqaConstants.PASSWORD_MIN_LENGTH)]],
  usercomment: this.selectedUser.comment == null ? "" : this.selectedUser.comment
});

this.userForm.setValidators(oneValueHasToBeChangedValidator([{
  controlName: "status",
  initialValue: this.selectedUser.status == 1
}, {
  controlName: "username",
  initialValue: this.selectedUser.username
}, {
  controlName: "realname",
  initialValue: this.selectedUser.realname
}, {
  controlName: "password",
  initialValue: ""
}, {
  controlName: "usercomment",
  initialValue: this.selectedUser.comment == null ? "" : this.selectedUser.comment
}]));
this.userForm.updateValueAndValidity();