Question

我有一个使用ng-repeat显示的字段列表。输入字段的名称是动态的。使用动态名称时如何使ng-messages工作？以下是我尝试过的，但这不起作用：

<form id="userForm" name="userForm" ng-submit="userForm.$valid && submit()" novalidate>
    <div ng-repeat="uniqueField in uniqueFields">
        <div>
            <label>{{uniqueField.form_field_label}}</label>
            <input required="{{uniqueField.isMandatory}}" name="text_{{uniqueField.form_field_id}}" ng-model="uniqueField.form_field_value" type="text">
            <div ng-messages="userForm.{{uniqueField.form_field_id}}.$error" ng-if="userForm.$submitted && uniqueField.isMandatory == true">
                <div ng-message="required">Please enter a {{uniqueField.form_field_label}}.</div>
            </div>

        </div>
    </div>
</form>

Answer 1

您使用text_为输入字段的名称添加前缀，但查找userForm.{{uniqueField.form_field_id}}.$error。删除前缀，它应该工作：）

以下是解决方案HTML：

<div ng-app="demoApp" ng-controller="MainCtrl as ctrl">
  <form id="userForm" name="userForm" ng-submit="userForm.$valid && ctrl.submit()" novalidate>
    <div ng-repeat="uniqueField in ctrl.uniqueFields">
      <div>
        <label>{{uniqueField.form_field_label}}</label>
        <input required="{{uniqueField.isMandatory}}" name="{{uniqueField.form_field_id}}" ng-model="uniqueField.form_field_value" type="text">
        <div ng-messages="userForm[uniqueField.form_field_id].$error">
          <div ng-message="required">Please enter a {{uniqueField.form_field_label}}.</div>
        </div>
      </div>
    </div>
    <button type="submit">Submit</button>
  </form>
</div>

和控制器：

angular.module('demoApp', [])
.controller('MainCtrl', MainCtrl);

function MainCtrl($log) {
  var ctrl = this;

  function activate() {
    ctrl.uniqueFields = [{
      form_field_label: 'Name',
      form_field_id: 'name',
      form_field_value: '',
      isMandatory: true
    }]
  }

  activate();

  ctrl.submit = function() {
    $log.debug('form submitted');
  }
}

工作小提琴：https://jsfiddle.net/trollr/133hhwzx/

Answer 2

您可以使用$ eval方法，您可以阅读更多相关信息here以将'myDynamicForm.' + formField.formFieldId + '.$error'字符串解析为表达式。

$ scope。$ eval 在当前作用域上执行表达式并返回结果。表达式中的任何异常都会被传播（未捕获）。这在评估Angular表达式
时很有用

请参阅工作jsfiddle here

请记住在您的应用程序配置中注册ngMessages模块。

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-4" data-ng-controller="DynamicFormController as vm">
      <form name="myDynamicForm" novalidate>
        <div class="form-group" data-ng-repeat="formField in formFields">
          <label for="{{formField.formFieldId}}">{{formField.label}}</label>
          <input class="form-control" name="{{formField.formFieldId}}" id="{{formField.formFieldId}}" ng-required="{{formField.isMandatory}}" type="text" ng-model="formField.value">
          <div ng-messages="vm.onValidateMessages(formField)">
            <label ng-message="required" class="label label-danger">{{formField.label}} required</label>
          </div>
        </div>
        <button type="button" class="btn btn-default" data-ng-click="vm.onSubmitForm()">Submit</button>
     </form>
   </div>
 </div>

JS：

var myApp = angular.module('myApp', ['ngMessages']);

myApp.controller('DynamicFormController', ['$scope', function($scope) {
  var self = this;

  $scope.formFields = [{
    isMandatory: true,
    formFieldId: 'UniqueField1',
    value: null,
    label: 'Email'
   }, {
    isMandatory: false,
    formFieldId: 'UniqueField2',
    value: null,
    label: 'First Name'
  }];

  self.onSubmitForm = function() {
    if (!$scope.myDynamicForm.$valid) {
      console.error('form is invalid');
      return;
    }
  };

  self.onValidateMessages = function(formField) {
    return $scope.$eval('myDynamicForm.' + formField.formFieldId + '.$error');
  };
}]);

Answer 3

我修改了trollr的答案及其工作原理。我添加了attr，ng-show="userForm[uniqueField.form_field_id].$error.required"

以下是解决方案HTML：

<div ng-app="demoApp" ng-controller="MainCtrl as ctrl">
<code>{{userForm[uniqueField.form_field_id].$error}}</code>
  <form id="userForm" name="userForm" `enter code here`ng-submit="userForm.$valid && ctrl.submit()" novalidate>
    <div ng-repeat="uniqueField in ctrl.uniqueFields">
        <div>
            <label>{{uniqueField.form_field_label}}</label>
            <input required="{{uniqueField.isMandatory}}" name="{{uniqueField.form_field_id}}" ng-model="uniqueField.form_field_value" type="text">
            <div ng-messages="userForm[uniqueField.form_field_id].$error">
                <div class="error" ng-show="userForm[uniqueField.form_field_id].$error.required" ng-message="required">Please enter a {{uniqueField.form_field_label}}.</div>
            </div>
        </div>
    </div>
    <button type="submit">Submit
    </button>
</form>
</div>

和控制器：

angular.module('demoApp', [])
    .controller('MainCtrl', MainCtrl);

function MainCtrl($log) {
    var ctrl = this;

    function activate() {
        ctrl.uniqueFields = [
      {
        form_field_label: 'Name',
        form_field_id: 'name',
        form_field_value: '',
        isMandatory: true
      }
    ]
    }

    activate();

  ctrl.submit = function() {
    $log.debug('form submitted');
  }
}

或者您可以使用ng-form代替表单标记。

工作小提琴：http://jsfiddle.net/Q386jmnw/

使用带有动态字段名称的ng-messages

3 个答案: