How to reduce the form validation fields in AngularJS

Question

I have a form with 3 input fields. But I want to use the form also for other pages. Therefore I have reduced the form. At the beginning I've defined the view as follows:

View:

<form class="form-horizontal" name="editForm" novalidate>
  <div ng-repeat="elements in form">
    <div class="form-group-sm has-feedback" ng-repeat="el in elements.items" ng-class="{ 'has-error' : hasError(editForm), 'has-success' : hasSuccess(editForm) }">
       <label class="control-label" for="{{el.id}}">{{el.label}}</label>
       <input type="{{el.fieldType}}"
              class="form-control" 
              placeholder="{{el.label}}"  
              name="{{el.name}}" 
              id="{{el.id}}"
              ng-model="selected[el.model]" 
              ng-disabled="{{el.disabled}}"
              ng-pattern="el.pattern" 
              ng-required="{{el.required}}"
       />
       <p class="help-block" ng-show="editForm.{{el.name}}.$error.required && editForm.{{el.name}}.$touched">Field is required.</p>
       <p class="help-block" ng-show="editForm.{{el.name}}.$error.pattern">Thats the pattern error message.</p>
   </div>
 </div>    
</form>

I want to outsource the error messages / validation in a function. The error messages in the p-Tag don't work.

I've tried this in my Ctrl:

$scope.hasError = function (form) {
   return form.Firstname.$invalid && form.Firstname.$dirty;
}

$scope.hasSuccess = function (form) {
   return form.Firstname.$valid;
}

That is only for the inputfield Firstname. But how can I define this dynamically for all fields (firstname, lastname, age)?

dfsq · Accepted Answer · 2015-06-14 18:26:09Z

1

Pass dynamic field name into function:

ng-class="{ 'has-error' : hasError(editForm, el.name), 'has-success' : hasSuccess(editForm, el.name) }"

and in controller use bracket notation to access variable ngModelController:

$scope.hasError = function (form, name) {
   return form[name].$invalid && form[name].$dirty;
};

$scope.hasSuccess = function (form, name) {
   return form[name].$valid;
};

answered Jun 14, 2015 at 18:26

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yuro Over a year ago

Thx for the solution but is it possible to improve the code in ngShow? I mean to outsource in a function or directive or similar??

simon · Accepted Answer · 2015-06-14 18:27:10Z

1

Try this

 <p class="help-block" ng-show="editForm[el.name].$error.required && editForm[el.name].$touched">Field is required.</p>
 <p class="help-block" ng-show="editForm[el.name].$error.pattern">Thats the pattern error message.</p>

answered Jun 14, 2015 at 18:27

simon

1,48510 silver badges20 bronze badges

2 Comments

yuro Over a year ago

is it possible to outsource the code in ngShow in a function? What is best practice for this kind of code?

simon Over a year ago

checkout ngMessages in angularjs docs.angularjs.org/api/ngMessages/directive/ngMessages

Collectives™ on Stack Overflow

How to reduce the form validation fields in AngularJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related