角表單驗證 - 值必須是不同的初始值

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

的禁用方法將檢查如果當前形式值相同的初始值。