Angular2：比较2个表格

Question

我想比较两个表单的值是否相同。我有这个

if(this.holdForm.value != this.positionForm.value){
    this.enableButton = true;
}else{
    this.enableButton = false;
}

但它不起作用。它不会使 enableButton 为真。

UPDATED:

    this.positionForm = this.fb.group({
            'name' : [position.name, Validators.required],
            'remark': position.remark
        });

    this.holdForm = this.fb.group({
        'name' : position.name,
        'remark': position.remark
    });



    this.positionForm.valueChanges.subscribe(data => {
        this.onValueChanged(data);
        if(this.data.process == 'register'){
            this.enableButton = true;
        }else if(this.data.process == 'update' && this.holdForm.value != this.positionForm.value){
            this.enableButton = true;
        }else{
            this.enableButton = false;
        }
    });

Answer 1

您不能直接比较对象值：

var person1 = {name:"John"};
var person2 = {name:"John"};
console.log(person1===person2) // will give you false

那是因为person1和person2都指向内存中两个不同的引用。

如果你只是想比较两个对象的值，你可以有一个简单但昂贵的方法：将它们字符串化，然后比较字符串：

JSON.stringify(person1) === JSON.stringify(person2) //this gives you true

使用上面的字符串化方法有很多限制。其中之一是对象中属性的顺序很重要。您可能想考虑一个更通用的解决方案来比较对象。

Answer 2

你应该做的是编写一个自定义验证器，例如检查密码是否与确认密码字段匹配的验证器。喜欢：

this.formBuilder.group({
    password: [''],
    confirmPassword: [''],
    }, {
    validator: matchingFieldsValidation("password", "confirmPassword")
})

export function matchingFieldsValidation(firstControlName: string, secondControlName: string): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
        const firstControl= control.get(firstControlName);
        const secondControl= control.get(secondControlName);
        if (!firstControl|| !secondControl) return null;
        return firstControl.value == secondControl.value ? null : {matchingFields: true}
    }
}

然后您可以 enable/disable 按钮，具体取决于验证状态。恕我直言，最干净的解决方案。

Angular2：比较2个表格

Angular 2: Compare 2 forms

forms

angular

angular-reactive-forms

formgroups