- You could use dynamic patterns:
http://stackoverflow.com/questions/18900308/angularjs-dynamic-ng-pattern-validation
- You could define your patterns in the directive template and then
specify by another attribute like "type":
<editable type="username" value="userr.name"></editable>
template:
<span class="user-info" ng-hide="edit">{{value}}</span>
<ng-form name="innerForm" ng-show="edit">
<div ng-switch on="type">
<input ng-switch-when="username" ng-model="username" type="text"
ng-pattern="/username pattern/">
<input ng-switch-when="password" ng-model="password" type="text"
ng-pattern="/password pattern/">
<input ng-switch-when="email" type="text" ng-pattern="/email pattern/">
</div>
</ng-form>
<a ng-show="!edit" ng-click="edit=true">
On Friday, April 18, 2014 4:05:07 PM UTC-6, Nikita Tovstoles wrote:
>
> Hi, I am building an edit-in-place directive - similar to
> x-editable<http://vitalets.github.io/angular-xeditable/#text-simple> -
> a widget that toggles between an anchor displaying a value and an input
> editing it. Would appreciate some feedback on the following impl choices:
>
> I would like to support arbitrary ng-x validation attributes that work
> with input[text] <https://docs.angularjs.org/api/ng/input/input%5Btext%5D>.
> Seems like the most elegant way to do so would be to restrict: 'A' the
> directive, and leverage ng-model, so that as client programmer I could
> enable this directive participate in AJS form validation and
>
> <form name="myForm"><input name="foo" type="text" ng-model="foo" required
> ng-pattern="" editable></form>
>
> ...can call scope.myForm.foo.$valid
>
> However, I think that won't work because I can't specify a directive
> template (or templateUrl) with an <input> since that element cannot have
> children. *So I must use restrict: 'E', right?* (Unless I ditch the
> template and instead provide a compile() fn that appends template DOM to
> <input>, but that would be harder to maintain)?
>
> So now I have an element directive:
>
> <editable name="foo" ng-model="foo" required ng-pattern=""></editable>
>
> and associated template:
>
> <ng-form name="innerForm" ng-show="edit">
> <input type="text">
> </ng-form>
> <a ng-show="!edit" ng-click="edit=true">
>
> But now I have to enable support input[text] validation attr support on
> <editable>. One way to do so would be by copying attributes from <editable>
> onto the inner <input> in directive's compile() fn ie:
>
> <editable name="foo" ng-model="foo" e-ng-pattern="/expr/"></editable>
>
> ...would produce the following template:
>
> <ng-form name="innerForm" ng-show="edit">
> <input type="text" ng-pattern="/expr/">
> </ng-form>
> <a ng-show="!edit" ng-click="edit=true">
>
> ...by having compile() find attributes with 'e-' prefix and replicate them
> on inner <input>.* Is there a more elegant approach? One where I could
> somehow stick with attribute directive (on <input>)?*
>
>
> thanks
> -nikita
>
>
>
--
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.
