ng-repeat中的AngularJS验证没有触发

AngularJS validation inside ng-repeat isn't firing

本文关键字：验证 中的 AngularJS ng-repeat      更新时间：2023-09-26

这是我的第一个角度形式。 该页面有一个 ng-repeat，该字段公开一个字段以编辑现有值。 填充值没有问题。 每个重复都有单独的形式。 当文本框为空或模式错误时，不会显示错误消息，也不会禁用按钮。 任何想法将不胜感激。

<div id="ExistingTransactions" class="row">
                <div class="panel-body">
                    <div id="items" class="row" ng-repeat="v in vc.transactions">
                        <div id="edittemplate" ng-show="editing">
                            <div ng-form="vc.myEditForm" ng-init="amountField = 'amount' + v.id; dateField = 'date' + v.id">
                                <div class="col-sm-1">
                                    <input
                                        id="btnUpdate"
                                        class="btn btn-success btn-sm"
                                        ng-click="vc.update(v)" 
                                        ng-disabled="vc.myEditForm.amountField.$invalid || 
                                                     vc.myEditForm.dateField.$invalid"
                                        type="button"
                                        value="Update" />
                                </div>
                                <div class="col-sm-2">
                                    <input 
                                        name="{{amountField}}"
                                        id="txtAmount" 
                                        class="form-control"
                                        ng-model="v.Amount"
                                        ng-pattern="vc.validate.currency"
                                        ng-required="true"
                                        type="text" />
                                    <div 
                                        ng-show="vc.myEditForm.amountField.$dirty && vc.myEditForm.amountField.$invalid" 
                                        class="text-danger" 
                                        role="alert">
                                        <div ng-show="vc.myEditForm.amountField.$error.required">An amount is required</div>
                                        <div ng-show="vc.myEditForm.amountField.$error.pattern">Please enter an amount in the correct format. IE: 12.56</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

> 您将 amountField 输入的名称设置为 {{amountField}} ，但尝试从名为 amountField 的输入中获取错误。您需要将名称设置为仅amountField或使用 amountField 的值从表单对象中获取错误，即 form[amountField] 。

谢谢，本。 不幸的是，这没有任何效果。

但是，我修复了它！ 我将 ng-form="vc.myEditForm" 移到 ng-repeat 上方的父div。 然后我改变了 

<div ng-show="vc.myEditForm.amountField.$dirty && vc.myEditForm.amountField.$invalid" class="text-danger" role="alert">
    <div ng-show="vc.myEditForm.amountField.$error.required">An amount is required</div>
    <div ng-show="vc.myEditForm.amountField.$error.pattern">Please enter an amount in the correct format. IE: 12.56</div>
</div>

自 

<div ng-messages="vc.myEditForm[amountField].$error" class="text-danger" role="alert">
    <div ng-message="required">An amount is required</div>
    <div ng-message="pattern">Must be a valid dollar amount</div>
</div>

它现在按预期工作，每一行的验证都独立于其他行。 我不明白为什么 ng-show 方法在 ng-repeat 中不起作用，而它对输入表单工作得很好。 无论如何，它正在工作。

感谢您的帮助。

相关文章：