AngularJS nested expressions within ng-class

Question

How can I achieve something like this:

ng-class="{ 'has-errors' : form_editProfile.password.$invalid && !form_editProfile.password.$pristine......

but, within a loop/ng-repeats (of dynamic forms, and dynamic fields), something like:

 <div ng-repeat="(form, fields) in sections">
    <form name="form_{{form | alphanumeric}}" novalidate>
      <div ng-repeat="(name, field) in fields" ng-class="{ 'has-errors' : form_{form | alphanumeric}.{field}.$invalid && !form_{form | alphanumeric}.{field}.$pristine, 'no-errors' : form_{form | alphanumeric}.{field}.$valid">

......where 'alphanumeric' is a filter that I have which converts "Contact Info" to "ContactInfo" (a valid form name) - for example.

The basic dynamicly generated form/form elements is working, I just can't work out how to get the validation working properly in this situation with embeded expressions..

Can you add any Fiddle/Plnkr?

Khalid Hussain
– Khalid Hussain

2016-04-07 05:42:58 +00:00
Commented Apr 7, 2016 at 5:42 — Khalid Hussain
– Khalid Hussain, Commented Apr 7, 2016 at 5:42

nickgraef · Accepted Answer · 2016-04-07 06:34:44Z

Simple interpolation should work here, like this:

ng-class="{ 'has-errors' : form_{{form | alphanumeric}}.{{field}}.$invalid }"

Here's a quick demo showing how the form name and input name can both be interpolated in a ng-class rule.

angular.module('myApp', [])
  .controller('MainCtrl', function($scope) {
    $scope.formName = 'TestForm';
    $scope.inputName = 'myInput';
  })
  .filter('lowercase', function() {
    return function(input) {
      return input.toLowerCase();
    }
  });

.red {
  color: red;
}

<section ng-app="myApp">
  <div ng-controller="MainCtrl">
    <form name="form_{{ formName | lowercase }}">
      <input type="text" name="{{ inputName }}" ng-model="inputValue" />
    </form>

    <span ng-class="{ 'red': form_{{formName | lowercase}}.{{inputName}}.$dirty }">
      This text will be red if the input is dirty
    </span>
  </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

Collectives™ on Stack Overflow

AngularJS nested expressions within ng-class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related