A Pen by Chris Barr

Thumbnail
This awesome code was written by chrismbarr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrismbarr ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Chris Barr</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

  
  
</head>

<body>

  <div ng-app="radioTest" ng-controller="testCtrl" class="container">
  
  <h4>How can I validate these radio buttons?</h4>
  
  <table class='table table-striped table-bordered'>
    <tbody>
      <tr ng-repeat="u in users"
          ng-form="userFormRow">
        <td>
           <div class="form-group" ng-class="{'has-error': userFormRow.email.$invalid}">
             <label class="control-label" for="email-{{$index}}">Email</label>
             <input name="email"
                    id="email-{{$index}}"
                    type="email"
                    class="form-control input-sm"
                    ng-model="u.EmailAddress"
                    required />
             <p class="help-block" ng-show="userFormRow.email.$error.required">An email address is required!</p>
             <p class="help-block" ng-show="!userFormRow.email.$error.required && userFormRow.email.$invalid">Invalid email address!</p>
          </div>
        </td>
        <td>
          <!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
          <div class="form-group"
               ng-class="{'has-error': userFormRow.service-{{$index}}.$invalid }">
            <label class="control-label center-block">Service</label>
            <div class="radio-inline" ng-repeat="o in serviceOptions">
              <label>
                <!-- HERE is where I define the unique name attribute based on the index of the table repeater -->
                <input type="radio"
                       name="service-{{$parent.$index}}"
                       value="{{::o}}"
                       ng-model="u.Service"
                       ng-required="!u.Service"> {{::o}}
              </label>
            </div>
            
            <!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
            <p class="help-block" ng-show="userFormRow.service-{{$index}}.$invalid">A service must be selected!</p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  
  <hr />
  <h4>Raw Data</h4>
  <pre>{{users | json}}</pre>
  
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrismbarr/a-pen-by-chris-barr-eNoGLJ */
console.clear(); 

angular.module('radioTest', [])
  .controller('testCtrl', ['$scope', function($scope) {
    
    //Services might come back not defined at all
      $scope.users = [
        {EmailAddress: 'bob@aol.com', Service: "Full"},
        {EmailAddress: 'jim@aol.com', Service: "Basic"},
        {EmailAddress: 'sam@aol.com', Service: null},
        {EmailAddress: 'joe@aol.com'}
      ];
    
      $scope.serviceOptions =  ["Full", "Basic"];
    }]);

Comments