Hey all,
I am creating a directive to automatically add validation classes to my
controls.. (I have over 200 controls, and I don't want to manually add the
code for each)
*Directive Code:*
app.directive('requiredInput', function ($compile) {
> return {
> restrict: 'A',
> compile: function () {
> return {
> post: function (scope, element, attrs, controller) {
> //This is passed through the attribute,
> determines the required logic based on hide/show/disabled logic of the
> control.
> var requiredLogic = attrs.smrhRequiredInput;
> //Getting the element in the children which needs
> to be required.
> //Main Division where the error class will go.
> This needs to be present as an empty over the contents that need the error
> class.
> var containerDiv = element.children('div');
> //Division which holds the input that will be
> validated.
> var childDiv = containerDiv.children('div');
> //Element which needs to be validated
> (Dependent on twitter bootstrap's class of form-control
> var inputElement =
> childDiv.children('.form-control');
> //Element which hosts the Label for the input
> field (Dependent on twitter bootstrap's class of control-label)
> var inputLabel =
> containerDiv.children('.control-label');
> //Creating Error Class.
> //Angular Form Properties Information:
> https://docs.angularjs.org/api/ng/type/form.FormController
> //Bootstrap Error Classe Information:
> http://getbootstrap.com/css/#forms-control-validation
> //This will look like: {'has-error':
> mmsChangeForm.ChangeDescription.$invalid &&
> mmsChangeForm.ChangeDescription.$invalid}
> //This way it will only show the red outline if
> the error happens.
> var errorClass = "{'has-error': validateForm && "
> + scope.formName + "." + inputElement[0].name + ".$invalid}";
> //Adding Red asterisk to mark the field as
> required.
> var asteriskTemplate = '<i class="glyphicon
> glyphicon-asterisk red-error small-glyphicon"></i>';
> inputLabel.prepend(asteriskTemplate);
> //Adding required class to text control.
> inputElement.attr('ng-required', requiredLogic);
> //Adding the errorClass to Container's ng-class.
> var currentNgClass = containerDiv.attr('ng-class');
> if (typeof (currentNgClass) != 'undefined') {
> containerDiv.attr('ng-class', currentNgClass +
> errorClass);
> } else {
> containerDiv.attr('ng-class', errorClass);
> }
>
> //Adding the error message in a <p> below the
> input
> //This will look like: <p
> ng-show="mmsChangeForm.ChangeDescription.$invalid &&
> mmsChangeForm.ChangeDescription.$dirty" class="help-block">Change
> Description is required.</p>
> var errorMsgTemplate = '<p ng-show="validateForm
> && ' + scope.formName + '.' + inputElement[0].name + '.$invalid"
> class="help-block">' +
> inputElement[0].getAttribute('data-errorname')
> + ' is required.' + '</p>';
> childDiv.append(errorMsgTemplate);
> //Compile to rebind the data to angular.
> $compile(element.contents())(scope);
> }
> }
> }
> };
> });
*HTML markup:*
<div class="col-md-12 form-group margin-top-20" required-input="true">
> <div>
> <label class="control-label col-md-3 col-sm-3">
> <b>Describe Change: </b>
> </label>
> <div class="col-md-9 col-sm-9">
> <textarea class="form-control hidden-print"
> rows="2" ng-model="baseData.ChangeDescription" name="ChangeDescription"
> data-errorname="Change Description"></textarea>
> </div>
> </div>
> </div>
I have to use $compile, because without it, my ng-show and ng-class logic
doesn't work.
The issue that happens, that every time someone clicks in the textarea or
input which has this directive, it automatically moves the cursor to the
end of the sentence in the control.
Any suggestions on how I can fix this?
I have tried using Link, Compile: Pre.. but nothing seems to work.
--
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.
