在ng消息中动态设置表单名称

Dynamically set form name in ng-messages

本文关键字：表单 设置 动态 ng 消息      更新时间：2023-09-26

在我的应用程序中的多个表单中，我试图使用相同的指令，这是一个电子邮件输入字段完成验证(它从最近使用的电子邮件列表中获取其值，但这与此问题无关)。因为使用该指令的形式取决于我使用它的地方，所以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>

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

我遇到了两个问题:

  1. ngMessage错误没有正确显示，因为它们似乎没有绑定到正确的字段/表单。
    2. 我无法禁用"保存"按钮。

这里是工作(修剪装饰等，以便您只看到要点):

<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在ng-repeat中构建formName变量。$invalid
  • 字段验证引用格式为formName..$error

注意事项:

我无法让ng-disable实际上禁用"按钮"基于它是无效的或不(ng-click执行无论什么，也许是因为我没有使用<button>，但使用<span> w/glyphicon)。所以我选择让一个在你能保存时显示，另一个在你不能保存时显示。这样做效果更好，因为用户可以直观地看到他们不能保存，如果他们将鼠标悬停在上面，他们会看到他们需要先修改表单。

相关文章：