角度验证问题答案

【问题标题】：Trouble with Angular Validation角度验证问题
【发布时间】：2014-10-19 18:10:46
【问题描述】：

我是 Angular 新手，在调试表单验证的使用时遇到了麻烦。也就是说，如果表单无效，我想禁用 sumbit 按钮。我的问题是，即使我插入了明显有效的输入，它仍然无效。这甚至对空表单无效：

这是我的模板（原代码已注释掉）：

<div>
    <div class="row">
        <div class="col-xs-6">
            <a href ng-click="companiesCtrl.newEdit()" class="btn btn-primary">Uus asutus</a>
            <table class="table">
                <tbody>
                <tr ng-repeat="company in companiesCtrl.list">
                    <td><a href ng-click="companiesCtrl.load(company)">{{company.name}}</a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-xs-6">
            <form id="editForm">
            <!--<form ng-show="companiesCtrl.showEdit()" ng-submit="companiesCtrl.save()" name="editForm">-->
                <!--<h4>Asutuse detailid</h4>-->
                <!--<a ng-show="companiesCtrl.edit.id != 0" class="btn btn-primary" ng-href="../{{companiesCtrl.edit.id}}/product/list">Asutuse vaatele</a>-->
                <!--<fieldset class="form-group">-->
                    <!--<input  ng-model="companiesCtrl.edit.id"/>-->
                <!--</fieldset>-->
                <!--<fieldset class="form-group">-->
                    <!--<input placeholder="Asutuse nimi" title="Asutuse nimi" ng-model="companiesCtrl.edit.name" ng-required="true"/>-->
                <!--</fieldset>-->
                <!--<fieldset class="form-group">-->
                    <!--<input type="submit" class="btn btn-success" ng-disabled="editForm.$invalid" value="Salvesta" />-->
                <!--</fieldset>-->
            </form>
            <span>{{editForm.$error}}</span>
            <span>{{editForm.$invalid}}</span>
            <span>{{editForm.$valid}}</span>
        </div>
    </div>

这是“span”-s的结果：

{"required":[{}]} true false

我的问题是，由于我是 Angular 新手，如何调试它，或者有哪些其他因素会影响表单“有效”状态。

【问题讨论】：

标签： javascript angularjs forms validation

【解决方案1】：

我自己设法找到了问题所在。我有多个被 ng-show 隐藏的指令。它们都有一个名为“editForm”的表单，这会导致 Angular 验证所有表单。

如果有人需要这个来调试：我在我的模板中添加了以下内容：

<span ng-repeat="error in compForm.$error"><span ng-repeat="error2 in error">
                {{companiesCtrl.logThis(error2)}}</span></span>

以下给我的控制器：

this.logThis = function(toLog) {
                console.log(toLog);
            }

从日志中我看到它验证了太多次并质疑我的问题。

【讨论】：