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

在我的应用程序中的多个表单中，我试图使用同一个指令，这是一个电子邮件输入字段，带有验证（它的值来源于最近使用的电子邮件列表，但与此问题无关）。由于指令的使用形式因使用位置而异，因此需要动态呈现ng messages属性

我已经设法让ng消息动态地自我设置，但它没有按预期工作。代码如下：

form.html

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

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>

VALIDATION.EMAIL\u必需\u错误
VALIDATION.EMAIL\u无效\u错误

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

我遇到了两个问题：

ngMessage错误没有正确显示，因为它们似乎没有绑定到正确的字段/表单

我无法禁用每个表单的“保存”按钮。美元似乎不起作用

以下是有效的方法（修剪过的装饰器等，因此您只能看到要点）：

姓名：
此字段必填
.....

要点：

• ng repeat中的ng init生成formName变量
• 保存/etc的表单验证使用此[formName]。$invalid
• 字段验证以formName..$error格式引用

需要注意的是：

---

我无法让ng disable实际禁用“按钮”，因为它是否无效（无论发生什么情况，ng单击都会执行，可能是因为我没有使用

，而是使用了

w/

glyphicon

）。所以我选择了一个可以保存时显示，另一个不能保存时显示。这样做效果更好，因为用户可以直观地看到他们无法保存，如果将鼠标悬停在上面，他们会看到他们需要先更正表单。

这让人很痛苦。谷歌搜索这个问题只会让人们在一个页面上使用一个表单，其中包含大量重复生成的输入字段。花了一段时间才弄明白。让我知道下面是如何为你工作的，如果你需要调整一点，我可以帮助你。祝你快乐！

<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>

<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>