1

我有一个使用 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>
4

3 回答 3

0

我已经修改了 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 代替 form 标签。

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

于 2017-11-13T07:39:07.423 回答
0

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

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

请在此处查看工作 jsfiddle

请记住在您的应用程序配置中注册该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');
  };
}]);
于 2016-04-08T07:34:35.780 回答
0

您在输入字段的名称前面加上前缀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/

于 2016-04-08T07:09:48.320 回答