Question

这是我的第一个角形。该页面具有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>

Answer 1

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

Answer 2

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

然而，我修好了！我移动了ng-form =＆＃34; vc.myEditForm＆＃34;到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中没有工作，当它对输入表单工作得很好时。无论如何，它正在发挥作用。

感谢您的帮助。

ng-repeat中的AngularJS验证不会被触发

2 个答案: