Geek Answers Handbook

How to check dynamic form fields in angular directive?

I would like to create a form with the fields created in the directive. Data binding works correctly, but validation does not work.

this is html:

<body ng-controller="MainCtrl"> <h1>form</h1> <form name="form"> <div ng-repeat="conf in config"> <div field data="data" conf="conf"></div> </div> </form> <pre>{{data|json}}</pre> </body>

controller and field directive:

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.data = {name: '', age: ''} $scope.config = [ {field: 'name', required:true}, {field: 'age'} ]; }); app.directive('field', function ($compile) { return { scope: { data: '=', conf: '=' }, link: function linkFn(scope, element, attrs) { // field container var row = angular.element('<div></div>'); // label row.append(scope.conf.field + ': '); // field input var field = angular.element('<input type="text" />'); field.attr('name', scope.conf.field); field.attr('ng-model', 'data.' + scope.conf.field); if (scope.conf.required) { field.attr('required', 'required'); } row.append(field); // validation if (scope.conf.required) { var required = angular.element('<span>required</span>'); required.attr('ng-show', 'form.' + scope.conf.field + '.$error.required'); row.append(required); } $compile(row)(scope); element.append(row); } } });

the problem is that validation for the name field does not work, and the required verification text is never displayed. Maybe the form in ng-show unknown in the directive. But I do not know how to pass the form to a field directive. Can you help me how to fix this? Thanks.

there is real-time code here: http://plnkr.co/edit/j0xc7iV1Sqid2VK6rMDF?p=preview

+8
angularjs angularjs-scope angularjs-directive
source share
3 answers

Todo:

before:

 $compile(row)(scope); element.append(row);

after

 element.append(row); $compile(row)(scope);

p / s in the "bar" for objects add css:

 .ng-invalid { border: 1px solid red; }
+5
source share

You will need to use ng-form and push the dynamic field directly into the form object.

This thread can help you: https://github.com/angular/angular.js/issues/1404

+2
source share

Here is the plunker bifurcated from you to fix your problem: http://plnkr.co/edit/qoMOPRoSnyIdMiZnbnDF?p=preview

To summarize, I added a clock that will switch with an error message instead of using the ng-show directive. Things can be hairy when you try to dynamically add a directive to a directory link. For easy use, in this case it is faster to add your own watch.

You can also look at this directive, which is preconfigured to handle many use cases for validation, and also makes it easy to create custom validations https://github.com/nelsonomuto/angular-ui-form-validation

 var toggleRequiredErrorMessage = function (invalid) { if(invalid === true) { addRequiredErrorMessage(); } else { removeRequiredErrorMessage(); } }; scope.$watch( watchIfRequired, toggleRequiredErrorMessage );
0
source share

More articles:


All Articles