ng-validate-equal
Version:
An Angular directive to validate equality of two template-driven form fields
81 lines • 11 kB
JavaScript
import { Directive, forwardRef, Attribute } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
import { Subscription } from 'rxjs';
import * as i0 from "@angular/core";
export class ValidateEqualDirective {
constructor(otherControl) {
this.otherControl = otherControl;
this.valueChangesSub = new Subscription();
}
ngOnDestroy() {
if (this.valueChangesSub) {
this.valueChangesSub.unsubscribe();
}
}
validate(selfControl) {
const selfControlValue = selfControl.value;
const otherControl = selfControl.root.get(this.otherControl);
if (!otherControl) {
throw new Error('ng-validate-equal: "otherControl" is not defined, please pass the name of the main field to the directive put on the secondary field like this example: ngValidateEqual="passwordFieldName"');
}
if (this.valueChangesSub) {
this.valueChangesSub.unsubscribe();
}
// this code works when user types in other control putting the error in self control
this.valueChangesSub = otherControl.valueChanges.subscribe(otherControlValue => {
if (!this.isEqual(selfControlValue, otherControlValue) && (selfControl.touched || selfControl.dirty)) {
selfControl.setErrors({
notEqual: true
});
}
else {
if (selfControl.errors && selfControl.hasError('notEqual')) {
delete selfControl.errors['notEqual'];
if (!Object.keys(selfControl.errors).length) {
selfControl.setErrors(null);
}
}
}
});
// this code works when the user types in self control putting the error in self control
if (!this.isEqual(selfControlValue, otherControl.value) && (selfControl.touched || selfControl.dirty)) {
return {
notEqual: true
};
}
return null;
}
isEqual(val1, val2) {
val1 = this.unifyEmptyStrings(val1);
val2 = this.unifyEmptyStrings(val2);
return val1 === val2;
}
unifyEmptyStrings(val) {
const isDefined = this.isDefined;
if (val === null || !isDefined(val)) {
val = '';
}
return val;
}
isDefined(value) {
const defaultUndefined = void (0);
return value !== defaultUndefined;
}
}
ValidateEqualDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0, type: ValidateEqualDirective, deps: [{ token: 'ngValidateEqual', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
ValidateEqualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.0", type: ValidateEqualDirective, selector: "[ngValidateEqual]", providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => ValidateEqualDirective), multi: true }
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.0", ngImport: i0, type: ValidateEqualDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngValidateEqual]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => ValidateEqualDirective), multi: true }
]
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Attribute,
args: ['ngValidateEqual']
}] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctdmFsaWRhdGUtZXF1YWwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctdmFsaWRhdGUtZXF1YWwvc3JjL2xpYi9uZy12YWxpZGF0ZS1lcXVhbC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzVFLE9BQU8sRUFBOEIsYUFBYSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0UsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFRcEMsTUFBTSxPQUFPLHNCQUFzQjtJQUkvQixZQUFpRCxZQUFvQjtRQUFwQixpQkFBWSxHQUFaLFlBQVksQ0FBUTtRQUNqRSxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFDOUMsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDdEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUN0QztJQUNMLENBQUM7SUFFRCxRQUFRLENBQUMsV0FBNEI7UUFFakMsTUFBTSxnQkFBZ0IsR0FBRyxXQUFXLENBQUMsS0FBSyxDQUFDO1FBQzNDLE1BQU0sWUFBWSxHQUFHLFdBQVcsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUU3RCxJQUFJLENBQUMsWUFBWSxFQUFFO1lBQ2YsTUFBTSxJQUFJLEtBQUssQ0FBQyw2TEFBNkwsQ0FBQyxDQUFDO1NBQ2xOO1FBRUQsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxlQUFlLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDdEM7UUFFRCxxRkFBcUY7UUFDckYsSUFBSSxDQUFDLGVBQWUsR0FBRyxZQUFZLENBQUMsWUFBWSxDQUFDLFNBQVMsQ0FDdEQsaUJBQWlCLENBQUMsRUFBRTtZQUNoQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU8sSUFBSSxXQUFXLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQ2xHLFdBQVcsQ0FBQyxTQUFTLENBQ2pCO29CQUNJLFFBQVEsRUFBRSxJQUFJO2lCQUNqQixDQUNKLENBQUM7YUFDTDtpQkFBTTtnQkFDSCxJQUFJLFdBQVcsQ0FBQyxNQUFNLElBQUksV0FBVyxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsRUFBRTtvQkFDeEQsT0FBTyxXQUFXLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO29CQUN0QyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLENBQUMsTUFBTSxFQUFFO3dCQUFFLFdBQVcsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUM7cUJBQUU7aUJBQ2hGO2FBQ0o7UUFDTCxDQUFDLENBQ0osQ0FBQztRQUVGLHdGQUF3RjtRQUN4RixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRSxZQUFZLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxJQUFJLFdBQVcsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUNuRyxPQUFPO2dCQUNILFFBQVEsRUFBRSxJQUFJO2FBQ2pCLENBQUM7U0FDTDtRQUVELE9BQU8sSUFBSSxDQUFDO0lBQ2hCLENBQUM7SUFFTyxPQUFPLENBQUMsSUFBUyxFQUFFLElBQVM7UUFDaEMsSUFBSSxHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNwQyxJQUFJLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxDQUFDO1FBRXBDLE9BQU8sSUFBSSxLQUFLLElBQUksQ0FBQztJQUN6QixDQUFDO0lBRU8saUJBQWlCLENBQUMsR0FBUTtRQUM5QixNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDO1FBQ2pDLElBQUksR0FBRyxLQUFLLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsRUFBRTtZQUNqQyxHQUFHLEdBQUcsRUFBRSxDQUFDO1NBQ1o7UUFDRCxPQUFPLEdBQUcsQ0FBQztJQUNmLENBQUM7SUFFTyxTQUFTLENBQUMsS0FBVTtRQUN4QixNQUFNLGdCQUFnQixHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNsQyxPQUFPLEtBQUssS0FBSyxnQkFBZ0IsQ0FBQztJQUN0QyxDQUFDOzttSEF6RVEsc0JBQXNCLGtCQUlSLGlCQUFpQjt1R0FKL0Isc0JBQXNCLDRDQUpwQjtRQUNQLEVBQUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHNCQUFzQixDQUFDLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRTtLQUNqRzsyRkFFUSxzQkFBc0I7a0JBTmxDLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsU0FBUyxFQUFFO3dCQUNQLEVBQUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSx1QkFBdUIsQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUU7cUJBQ2pHO2lCQUNKOzswQkFLZ0IsU0FBUzsyQkFBQyxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIGZvcndhcmRSZWYsIEF0dHJpYnV0ZSwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBWYWxpZGF0b3IsIEFic3RyYWN0Q29udHJvbCwgTkdfVkFMSURBVE9SUyB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1tuZ1ZhbGlkYXRlRXF1YWxdJyxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgeyBwcm92aWRlOiBOR19WQUxJREFUT1JTLCB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBWYWxpZGF0ZUVxdWFsRGlyZWN0aXZlKSwgbXVsdGk6IHRydWUgfVxuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgVmFsaWRhdGVFcXVhbERpcmVjdGl2ZSBpbXBsZW1lbnRzIFZhbGlkYXRvciwgT25EZXN0cm95IHtcblxuICAgIHByaXZhdGUgdmFsdWVDaGFuZ2VzU3ViOiBTdWJzY3JpcHRpb247XG5cbiAgICBjb25zdHJ1Y3RvcihAQXR0cmlidXRlKCduZ1ZhbGlkYXRlRXF1YWwnKSBwdWJsaWMgb3RoZXJDb250cm9sOiBzdHJpbmcpIHtcbiAgICAgICAgdGhpcy52YWx1ZUNoYW5nZXNTdWIgPSBuZXcgU3Vic2NyaXB0aW9uKCk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKSB7XG4gICAgICAgIGlmICh0aGlzLnZhbHVlQ2hhbmdlc1N1Yikge1xuICAgICAgICAgICAgdGhpcy52YWx1ZUNoYW5nZXNTdWIudW5zdWJzY3JpYmUoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHZhbGlkYXRlKHNlbGZDb250cm9sOiBBYnN0cmFjdENvbnRyb2wpOiBhbnkge1xuXG4gICAgICAgIGNvbnN0IHNlbGZDb250cm9sVmFsdWUgPSBzZWxmQ29udHJvbC52YWx1ZTtcbiAgICAgICAgY29uc3Qgb3RoZXJDb250cm9sID0gc2VsZkNvbnRyb2wucm9vdC5nZXQodGhpcy5vdGhlckNvbnRyb2wpO1xuXG4gICAgICAgIGlmICghb3RoZXJDb250cm9sKSB7XG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ25nLXZhbGlkYXRlLWVxdWFsOiBcIm90aGVyQ29udHJvbFwiIGlzIG5vdCBkZWZpbmVkLCBwbGVhc2UgcGFzcyB0aGUgbmFtZSBvZiB0aGUgbWFpbiBmaWVsZCB0byB0aGUgZGlyZWN0aXZlIHB1dCBvbiB0aGUgc2Vjb25kYXJ5IGZpZWxkIGxpa2UgdGhpcyBleGFtcGxlOiBuZ1ZhbGlkYXRlRXF1YWw9XCJwYXNzd29yZEZpZWxkTmFtZVwiJyk7XG4gICAgICAgIH1cblxuICAgICAgICBpZiAodGhpcy52YWx1ZUNoYW5nZXNTdWIpIHtcbiAgICAgICAgICAgIHRoaXMudmFsdWVDaGFuZ2VzU3ViLnVuc3Vic2NyaWJlKCk7XG4gICAgICAgIH1cblxuICAgICAgICAvLyB0aGlzIGNvZGUgd29ya3Mgd2hlbiB1c2VyIHR5cGVzIGluIG90aGVyIGNvbnRyb2wgcHV0dGluZyB0aGUgZXJyb3IgaW4gc2VsZiBjb250cm9sXG4gICAgICAgIHRoaXMudmFsdWVDaGFuZ2VzU3ViID0gb3RoZXJDb250cm9sLnZhbHVlQ2hhbmdlcy5zdWJzY3JpYmUoXG4gICAgICAgICAgICBvdGhlckNvbnRyb2xWYWx1ZSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKCF0aGlzLmlzRXF1YWwoc2VsZkNvbnRyb2xWYWx1ZSwgb3RoZXJDb250cm9sVmFsdWUpICYmIChzZWxmQ29udHJvbC50b3VjaGVkIHx8IHNlbGZDb250cm9sLmRpcnR5KSkge1xuICAgICAgICAgICAgICAgICAgICBzZWxmQ29udHJvbC5zZXRFcnJvcnMoXG4gICAgICAgICAgICAgICAgICAgICAgICB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbm90RXF1YWw6IHRydWVcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgICAgICBpZiAoc2VsZkNvbnRyb2wuZXJyb3JzICYmIHNlbGZDb250cm9sLmhhc0Vycm9yKCdub3RFcXVhbCcpKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBkZWxldGUgc2VsZkNvbnRyb2wuZXJyb3JzWydub3RFcXVhbCddO1xuICAgICAgICAgICAgICAgICAgICAgICAgaWYgKCFPYmplY3Qua2V5cyhzZWxmQ29udHJvbC5lcnJvcnMpLmxlbmd0aCkgeyBzZWxmQ29udHJvbC5zZXRFcnJvcnMobnVsbCk7IH1cbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgKTtcblxuICAgICAgICAvLyB0aGlzIGNvZGUgd29ya3Mgd2hlbiB0aGUgdXNlciB0eXBlcyBpbiBzZWxmIGNvbnRyb2wgcHV0dGluZyB0aGUgZXJyb3IgaW4gc2VsZiBjb250cm9sXG4gICAgICAgIGlmICghdGhpcy5pc0VxdWFsKHNlbGZDb250cm9sVmFsdWUsIG90aGVyQ29udHJvbC52YWx1ZSkgJiYgKHNlbGZDb250cm9sLnRvdWNoZWQgfHwgc2VsZkNvbnRyb2wuZGlydHkpKSB7XG4gICAgICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgICAgIG5vdEVxdWFsOiB0cnVlXG4gICAgICAgICAgICB9O1xuICAgICAgICB9XG5cbiAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBpc0VxdWFsKHZhbDE6IGFueSwgdmFsMjogYW55KSB7XG4gICAgICAgIHZhbDEgPSB0aGlzLnVuaWZ5RW1wdHlTdHJpbmdzKHZhbDEpO1xuICAgICAgICB2YWwyID0gdGhpcy51bmlmeUVtcHR5U3RyaW5ncyh2YWwyKTtcblxuICAgICAgICByZXR1cm4gdmFsMSA9PT0gdmFsMjtcbiAgICB9XG5cbiAgICBwcml2YXRlIHVuaWZ5RW1wdHlTdHJpbmdzKHZhbDogYW55KSB7XG4gICAgICAgIGNvbnN0IGlzRGVmaW5lZCA9IHRoaXMuaXNEZWZpbmVkO1xuICAgICAgICBpZiAodmFsID09PSBudWxsIHx8ICFpc0RlZmluZWQodmFsKSkge1xuICAgICAgICAgICAgdmFsID0gJyc7XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIHZhbDtcbiAgICB9XG5cbiAgICBwcml2YXRlIGlzRGVmaW5lZCh2YWx1ZTogYW55KSB7XG4gICAgICAgIGNvbnN0IGRlZmF1bHRVbmRlZmluZWQgPSB2b2lkICgwKTtcbiAgICAgICAgcmV0dXJuIHZhbHVlICE9PSBkZWZhdWx0VW5kZWZpbmVkO1xuICAgIH1cblxufVxuIl19