Angular 2: Compare 2 forms

Question

I want to compare if the two values of forms are the same. I have this

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

but it doesn't work. It won't make enableButton true.

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

I don't have error. The other one is a temporary form for previous values. I want to compare if there are changes. See updated @RahulSingh — Char, Jul 24 '17 at 09:12
you can use library like lodash and its equal method to compare two objects !_.isEqual(this.holdForm.value,this.positionForm.value) — Karan Garg, Jul 24 '17 at 09:32
This is basically a JS question, so here are some ideas too https://stackoverflow.com/questions/201183/how-to-determine-equality-for-two-javascript-objects I would go with lodash tho :) — AT82, Jul 24 '17 at 13:54

score 0 · Answer 1 · answered Jul 24 '17 at 09:10

You can't compare the object values directly:

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

That is because the both person1 and person2 pointing to two different references in the memory.

If you just want to compare the values of the two objects, you can have a straightforward but expensive way: stringify them and then compare the strings:

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

There are a lot of limitations using the stringified method above. One of them is the order of the properties in the object matters. You might want to think of a more generic solution to compare the object.

score 0 · Accepted Answer · answered Jul 24 '17 at 09:22

what you should do is to write a custom validator, for example the one checking if password matches confirm password field. like:

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

Then you can enable/disable button depending on the validation status. IMHO the cleanest solution.

Angular 2: Compare 2 forms

2 Answers2