Hi,
I am trying to create a directive for an e-mail input. Everything seems
okay except for the validation of the email address format. When I output
to console the ngModel also doesn't seem to get updated. When I inspect
with ng-controller the model values do get updated but not within the
controller.
The code of the directive html
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="email" name="{{name}}"
id="reg-{{name}}" ng-model="model" ng-blur="setBlur()" />
<label class="mdl-textfield__label"
ng-class="{'ba-textfield__label-error':showErrorPanel()}"
for="reg-{{name}}">{{label}}</label>
<div ng-show="showErrorPanel()">
<span class="ba-textfield__error"
ng-show="errorRequired()">{{requiredMessage}}</span>
<span class="ba-textfield__error"
ng-show="errorEmail()">{{formatMessage}}</span>
</div>
</div>
The code of the email field directive
.directive("emailInput", [function () {
return {
restrict: "E",
replace: true,
templateUrl: "email-field.html",
require: 'ngModel',
scope: {
model: '=ngModel',
name: '@name',
label: '@label',
required: '@required',
requiredMessage: '@requiredMessage',
formatMessage: '@formatMessage'
},
link: function (scope, element, attrs, ngModel) {
//set default values
if (scope.requiredMessage) { scope.requiredMessage =
'Required'; }
if (scope.formatMessage) { scope.formatMessage = 'Not
valid'; }
//get input element
element.children()[0].required =
scope.required.toLowerCase() == "true";
//register element with MDL
componentHandler.upgradeElement(element[0]);
scope.showErrorPanel = function () {
return ngModel.$submitted || ngModel.$touched;
};
scope.errorRequired = function () {
return ngModel.$error.required;
};
scope.errorEmail = function () {
return ngModel.$error.email;
};
scope.setBlur = function () {
ngModel.$setTouched();
};
}
}
}])
Please help!!!! I have been stuck on this issue for two days now, can't
figure out what I am doing wrong.
Thanks!
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
