角表单验证 - 值必须是不同的初始值

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(); 

Answer 2

您可以在设置表单对象后立即缓存初始值。然后更改您的disableSaveButton方法以检查两个值的相等性。

例如：

export class MyComponent { 
    initialValue: any; 

    constructor(private fb: FormBuilder) { 
     this.form = fb.group({...}); 
     this.initialValue = this.form.value; 
    } 

    disableSaveButton() { 
     return JSON.stringify(this.initialValue) === JSON.stringify(this.form.value); 
    } 
} 

的禁用方法将检查如果当前形式值相同的初始值。