.html

<!DOCTYPE html>
<html>

  <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous"> 
      <!-- JAVA SCRIPT REFERENCES -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
    <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
     <script src="app.js"></script>
  </head>

  <body ng-app="plunker" >
  <div ng-controller="DynamicFormController">
    <h3>Dynamic Radio Buttons</h3>

 <form name="myForm" class="form-horizontal" role="form" ng-submit="submitForm()">
<div ng-repeat="field in entity.fields">    
  <ng-form name="form">

               <!-- EMAIL FIELDS -->
            <div ng-if="field.type=='email'" class="form-group" ng-class="{ 'has-error' : 
                form[field.name].$dirty && form[field.name].$error.required,
                'has-success': form[field.name].$valid}">
                <label class="col-sm-2 control-label">{{field.label}}</label>
                <div class="col-sm-6">
                    <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" ng-model="field.data"
                        class="form-control" required />
                    <p class="help-block" ng-show="form[field.name].$dirty && form[field.name].$error.required">{{field.name}}
                        is required</p>
                    <p class="help-block" ng-show="form[field.name].$dirty && form[field.name].$error.email">Please enter valid {{field.name}}</p>
                    <!-- <p class="help-block" ng-show="{{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">required</p> -->
                </div>
            </div>
  </ng-form>
 </div>

  <br/>
  <button ng-disabled="myForm.$invalid" type="submit" id="submit">Submit</button>
  <br/>
  <pre>{{entity|json}}</pre>
   <br/>
 </form>


 </div>
  </body>

</html>

.js

var app = angular.module('plunker',[]);

app.controller('DynamicFormController', function ($scope, $log) {



    // we would get this from the api
    $scope.entity = {
      name : "Course", 
      fields :
        [
          {type: "text", name: "firstname", label: "Name" , required: true, data:""},
          {type: "radio", name: "color_id", label: "Colors" , options:[{id: 1, name: "orange"},{id: 2, name: "pink"},{id: 3, name: "gray"},{id: 4, name: "cyan"}], required: true, data:""},
          {type: "email", name: "emailUser", label: "Email" , required: true, data:""},
          {type: "text", name: "city", label: "City" , required: true, data:""},
          {type: "password", name: "pass", label: "Password" , min: 6, max:20, required: true, data:""},
          {type: "select", name: "teacher_id", label: "Teacher" , options:[{name: "Mark"},{name: "Claire"},{name: "Daniel"},{name: "Gary"}], required: true, data:""},
          {type: "checkbox", name: "car_id", label: "Cars" , options:[{id: 1, name: "bmw"},{id: 2, name: "audi"},{id: 3, name: "porche"},{id: 4, name: "jaguar"}], required: true, data:""}
        ]
      };

      $scope.submitForm = function(){
        $log.debug($scope.entity);
      }
})

  .directive("dynamicName",function($compile){
    return {
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs){
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    }
})

Answer 1

那么您可以添加一个这样的类：

ng-class="{'has-error': form[field.name].$error.email }"

因此您的元素将更改为：

<p class="help-block has-error" ng-class="{'has-error': form[field.name].$error.email }" ng-show="form[field.name].$dirty && form[field.name].$error.email">Please enter valid {{field.name}}</p>

在您的类中，您可以添加一个错误类，如下所示：

.has-error
{
  color:red !important;
}

Answer 2

在消息中，请

使用标记中带有条件的指令来更新HTML，请输入有效的{{field.name}}

ng-class =“ {'red'：form [field.name]。$ error.email}”

添加CSS类 .red {color：＃ff0000;}

！在这种情况下，不需要重要

AngularJS电子邮件验证

.html

.js

2 个答案: