Angular.js - Ngmodel Value Is Undefined When Ng-pattern Is Set In Directive

something similar may have been answered (ng-pattern + ng-change) but all responses were unable to fix this issue. I have two imbricated directives for creating a form input, a par

Solution 1:

By default in angular if a validator fail, undefined value assigned to ng-model, You can change this setting as follow :

<divng-model-options="{ allowInvalid: true}">

read here for detail docs

Solution 2:

I had some requirements that meant that I really really didn't want ng-model to write out undefined to the scope when validation was invalid, and I didn't want the invalid value either, so allowInvalid didn't help. In stead I just wanted ng-model do not write anything, but I couldn't find any option for this.

So I couldn't see any way forward except for doing some monkey patching of the ng-model controller.

So first I required ngModel in the component I was building require: { model: 'ngModel' } and then I did this in the $onInit hook:

const writeModelToScope = this.model.$$writeModelToScope;
const _this = this;
this.model.$$writeModelToScope = function() {
    const allowInvalid = _this.model.$options.getOption('allowInvalid');
    if (!allowInvalid && _this.model.$invalid) {
        return;
    }
    writeModelToScope.bind(this)();
};

I also didn't want to take in a new model value while the value was invalid and the component had focus, so I did:

const setModelValue = this.model.$$setModelValue;
this.model.$$setModelValue = function(modelValue) {
    _this.lastModelValue = modelValue;
    if (_this.model.$invalid) {
        return;
    }
    if (_this.hasFocus) {
        return;
    }
    setModelValue.bind(this)(modelValue);
};

element.on('focus', () => {
    this.hasFocus = true;
});

element.on('blur', (event) => {
    this.hasFocus = false;
    const allowInvalid = this.model.$options.getOption('allowInvalid');
    if (!allowInvalid && this.model.$invalid) {
        this.value = this.lastModelValue;
    }
    event.preventDefault();
});

Feel free to judge me, just know that I already feel dirty.