Question

在我的应用程序中的多个表单中，我正在尝试使用相同的指令，这是一个完成验证的电子邮件输入字段（它从最近使用的电子邮件列表中获取其值，但这与此问题无关）。因为使用指令的形式因我使用它的位置而不同，所以需要动态呈现ng-messages属性。

我设法让ng-messages动态设置自己，但它没有按预期工作。这是代码：

form.html

<form name="joinForm">
    <rt-recents-menu ng-model="vm.roomName"/>
</form>

directive.coffee

recents = angular.module 'rtRecents', ['ionic', 'ngMessages']
  .factory('rtRecentsService', require './recentsService')
  .directive('rtRecentsMenu', (rtRecentsService, $ionicActionSheet) ->
    restrict: 'E'
    template: require './recentsMenu.html'
    scope:
      ngModel: '=?'
    require: ['?ngModel', '^form']
    transclude: false
    replace: false
    link: (scope, element, attrs, ctrls) ->
      ngModel = ctrls[0]
      formCtrl = ctrls[1]
      scope.formName = formCtrl.$name

module.exports = recents.name

directive.html

<div class="email-line">
      <input type="email"
        name="roomName"
        required
        ng-model="ngModel"
        ng-keydown="onKeyDown()"/>
      <div id="email-error-messages" ng-messages="{{formName}}.roomName.$error" multiple role="alert">
        <div ng-message="required" class="warn" translate>VALIDATION.EMAIL_REQUIRED_ERROR</div>
        <div ng-message="email" class="warn" translate>VALIDATION.EMAIL_INVALID_ERROR</div>
      </div>
</div>

Answer 1

就我而言，我有一个显示db查询中返回的每一行的a。每一行在这个重复循环中都有自己的形式。

我遇到了两个问题：

ngMessage错误未正确显示，因为它们似乎与正确的字段/表单无关。
我无法禁用＆＃34; save＆＃34;按钮按形式。 $ invalid似乎无效。

这里有什么作用（修剪装饰等，所以你只看到要点）：

<div ng-repeat="row in rows | orderBy: 'sortBy'"
    ng-init="formName = 'siteEdit' + row.id">
    <form name="{{formName}}" ng-submit="view.startSave(row.id)">
        <!-- I have "control" buttons at the top of my form to save, cancel, etc. here are the two related to saving -->
        <span class="glyphicon glyphicon-save pull-right q-palette-color-2" ng-disabled="view.isPageBusy()"
            ng-show="! this[formName].$invalid" ng-click="view.startSave(row.id)" title="Save"/>
        <span class="glyphicon glyphicon-ban-circle pull-right q-palette-accent-2"
            ng-show="this[formName].$invalid" style="padding-left:10px;cursor: pointer; cursor: hand;" data-toggle="tooltip" title="Correct Errors To Save"/>
        <label for="siteName{{row.id}}">&nbsp;&nbsp;Name:</label>
            <input id="siteName{{row.id}}"
                class="form-control input"
                type="text"
                placeholder="name"
                ng-disabled="view.isPageBusy()"
                ng-model="row.name"
                name="name"
                required />
            <div ng-messages="formName.name.$error">
                <div ng-message="required">This field is required</div>
            </div>
        .....
    </form>
</div>

关键点：

ng-init构建formName变量。
save / etc的表单验证使用此[formName]。$ invalid
字段验证以formName .. $ error

需要注意的事项：

我无法使用ng-disable来实际禁用＆＃34;按钮＆＃34;基于它是否无效（无论何时执行ng-click，可能是因为我没有使用<button>但是使用<span> w / glyphicon）。因此，当您可以保存时，我选择显示一个，而当您不能保存时显示另一个。通过这种方式更好地工作，因为这个人可以直观地看到他们可以保存，如果他们将鼠标悬停在他们身上，他们将首先看到他们需要更正表格。

在ng-messages中动态设置表单名称

1 个答案: