Greater than Cross field validation in Angular Validator

Question

In my form some fields are depended on other fields. So I want to validate the control when the value changes will occur. I know about the global validator on formgroup. but I don't want to use that due to some other issues.

Scenario : If user enters a value in Car Amount field based on that user cannot enters the greater than value in Premium Amount textbox.

I have applied a custom validator on 'premiumAmount' field, but when I change the value in the 'carAmount' field then premiumAmount validation will not fire.

How to resolve this?

Answer 1

Instead of making Custom Greater than validation, this can be achieved through greaterThan validator of @rxweb/reactive-form-validators.

You just need to mention in your greatherThan validator in your formGroup. Here is the code:

 ngOnInit() {
        this.userFormGroup = this.formBuilder.group({
            carAmount:['',], 
            premiumAmount:['', RxwebValidators.greaterThan({fieldName:'carAmount' })], 
        });
    }

Here is the forked stackblitz.