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

Question

我的反应式表单验证设置如下：

  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属性 ist问题，只要我输入一些东西，dirty就是真的，如果我输入与初始值相同的值也是如此。我会拥有一个属性来告诉我一个输入值是否不等于初始值。这是可能的开箱即用还是我必须检查每个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();