Hi, I am having similar issue regarding validation. I am getting validation
rules for every field (required, min-lenght...) form server as a JSON.
So I created a small directive for adding those attributes to input.
It looks like this:
(function () {
'use strict';
angular
.module('genNextApp')
.directive('nxValidation', nxValidationDrct);
nxValidationDrct.$inject = ['$compile'];
function nxValidationDrct($compile) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var elName = attrs.name;
if (scope.validationParams[elName]) {
var params = scope.validationParams[elName],
param;
for (param in params) {
elem.attr(params[param].attr, params[param].value);
}
if(!elem[0].form.hasAttribute('compiled'))
{
elem[0].form.setAttribute('compiled', true);
$compile(elem[0].form)(scope);
}
}
}
};
};
})();
However, even though attributes are added and form is compiled(at least i
think it is),the rules are not applying.
I was looking everywhere for a solution but I didn't find nothing similar.
Json I get form server is in form:
$scope.validationParams =
{
addGroupFunction: [
{ attr: 'required', value: 'true' },
{ attr: 'ng-minlength', value: '5' },
{ attr: 'ng-maxlength', value: '15' }
],
addGroupEntityName: [
{ attr: 'required', value: 'true' },
{ attr: 'ng-maxlength', value: '6' }
]
};
On Friday, August 31, 2012 9:15:56 PM UTC+2, John E wrote:
>
> Thanks again Pawel!
>
> Perfect answer! ng-required solved my immediate problem, but I will be
> looking at option 3 soon as my needs expand.
>
> Cheers,
>
> John
>
>
> On Fri, Aug 31, 2012 at 9:01 PM, Pawel Kozlowski <[email protected]
> <javascript:>> wrote:
>
>> Hi John,
>>
>> Had a second look at your fiddle and 2 remarks:
>>
>> 1) If you are simply after adding a dynamic require, this one already
>> exists in the form of ngRequires (not documented atm, see
>> https://github.com/angular/angular.js/issues/1202
>>
>> 2) If you are simply after adding a custom validation logic, the
>> directive would be rather simple, check "Custom Validation" section in
>> http://docs.angularjs.org/guide/forms
>>
>> 3) Better yet, you could use ui-validate directive from angular-ui:
>> http://angular-ui.github.com/#directives-validate
>> This directive allows you to use any scope-defined function as a
>> validation function. This way you don't need to write any directives.
>>
>> Hope this helps,
>> Pawel
>>
>> On Fri, Aug 31, 2012 at 8:48 PM, John Eberly <[email protected]
>> <javascript:>> wrote:
>> > Pawel, awesome thanks! I tried to use post compile function, that
>> doesn't
>> > seem to work for me either (see new fiddle)
>> >
>> > http://jsfiddle.net/jeberly/2PN4D/9/
>> >
>> > I notice that there is a "ng-valid" class on the input after adding the
>> > "required" attribute. I kind of assumed angular would take care of
>> setting
>> > the right classes if I can get the attribute added soon enough. I will
>> > take a look at the $compile service too.
>> >
>> >
>> > -john
>> >
>> >
>> >
>> > On Fri, Aug 31, 2012 at 8:42 PM, Pawel Kozlowski
>> > <[email protected] <javascript:>> wrote:
>> >>
>> >> Hi John!
>> >>
>> >> Adding this in a link function is too late, all the directives were
>> >> already identified at this point. So, you are able to change the DOM
>> >> but AngularJS won't process this DOM in search for new directives.
>> >> What you would have to do is to use compile function or - depending on
>> >> your use-case, use $compile service
>> >> (http://docs.angularjs.org/api/ng.$compile).
>> >>
>> >> I'm working at the bootstrap-based inputs atm and hope to share
>> >> something soon to illustrate this with code examples....
>> >>
>> >> Cheers,
>> >> Pawel
>> >>
>> >> On Fri, Aug 31, 2012 at 8:37 PM, John E <[email protected]
>> <javascript:>> wrote:
>> >> > I am trying to have users build forms (aka form builder) where we
>> want
>> >> > to
>> >> > persist form metadata (validations, labels, etc) to database and then
>> >> > build
>> >> > form from that data.
>> >> >
>> >> > In the simplest form, I am trying to add a required validation to an
>> >> > input
>> >> > element based on a model attribute myinputmodel.required =
>> true/false.
>> >> > Here is a fiddle showing my failed attempt.
>> >> > http://jsfiddle.net/jeberly/2PN4D/
>> >> >
>> >> > The directive correctly adds the "required" attribute to input
>> element,
>> >> > but
>> >> > the submit button is not disabled (myform.$invalid still equals
>> false I
>> >> > guess)
>> >> >
>> >> > Any help is greatly appreciated.
>> >> >
>> >> > -john
>> >> >
>> >> > --
>> >> > You received this message because you are subscribed to the Google
>> >> > Groups
>> >> > "AngularJS" group.
>> >> > To post to this group, send email to [email protected]
>> <javascript:>.
>> >> > To unsubscribe from this group, send email to
>> >> > [email protected] <javascript:>.
>> >> > Visit this group at http://groups.google.com/group/angular?hl=en.
>> >> >
>> >> >
>> >>
>> >>
>> >>
>> >> --
>> >> Question? Send a fiddle
>> >> (http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
>> >> (http://plnkr.co/)
>> >> Need help with jsFiddle? Check this:
>> >>
>> >>
>> http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/
>> >>
>> >> Looking for UI widget library for AngularJS? Here you go:
>> >> http://angular-ui.github.com/
>> >>
>> >> --
>> >> You received this message because you are subscribed to the Google
>> Groups
>> >> "AngularJS" group.
>> >> To post to this group, send email to [email protected]
>> <javascript:>.
>> >> To unsubscribe from this group, send email to
>> >> [email protected] <javascript:>.
>> >> Visit this group at http://groups.google.com/group/angular?hl=en.
>> >>
>> >>
>> >
>> > --
>> > You received this message because you are subscribed to the Google
>> Groups
>> > "AngularJS" group.
>> > To post to this group, send email to [email protected]
>> <javascript:>.
>> > To unsubscribe from this group, send email to
>> > [email protected] <javascript:>.
>> > Visit this group at http://groups.google.com/group/angular?hl=en.
>> >
>> >
>>
>>
>>
>> --
>> Question? Send a fiddle
>> (http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
>> (http://plnkr.co/)
>> Need help with jsFiddle? Check this:
>>
>> http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/
>>
>> Looking for UI widget library for AngularJS? Here you go:
>> http://angular-ui.github.com/
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "AngularJS" group.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> To unsubscribe from this group, send email to
>> [email protected] <javascript:>.
>> Visit this group at http://groups.google.com/group/angular?hl=en.
>>
>>
>>
>
--
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.
