Question

考虑以下代码：

<form class="form-horizontal" name="accountForm">
    <div class="form-group" ng-class="{ 'has-error': accountForm.CurrentPassword.$invalid  }">
        <label class="col-sm-2 control-label">Current Password:</label>
        <div class="col-sm-10">
            <input class="form-control" type="password" name="CurrentPassword" ng-model="user.CurrentPassword" ng-minlength="8" placeholder="Enter current password">
        </div>
    </div>
</form>

为什么我们必须给表单和输入字段命名，并对其进行验证，有没有办法直接使用ng-model？如果我们可以这样做会更加清洁：

ng-class="{ 'has-error': user.CurrentPassword.$invalid  }">

不要在一个字段的上下文中使用它，而是在具有几十个字段的表单的上下文中。它开始很快变老。在我看来

<input name="CurrentPassword" ng-model="user.CurrentPassword"/>

是多余的（尽管我知道有不同的功能，其中一个来自传统的HTML post方法）。但是，我在Angular中发布了我的模型，所以我不需要这个功能，但是由于验证我还是被迫添加它？

修改

是的，当然修改课程和/或基于模型使用disabled=""也是一种选择，但会导致非常难看的HTML，显然$touched，$invalid和{{1不会工作......还有其他选择吗？或者任何人都可以解释是否有任何有效的推理，为什么以这种方式编写？

Answer 1

如果要使用AngularJS表单验证，则必须像使用它一样使用它。否则，您可以根据模型绑定执行自己的规则，例如：

<form class="form-horizontal" name="accountForm">
        <div class="form-group" ng-class="{ 'has-error': (user.CurrentPassword.length < 8)  }">
            <label class="col-sm-2 control-label">Current Password:</label>
            <div class="col-sm-10">
                <input class="form-control" type="password" name="CurrentPassword" ng-model="user.CurrentPassword" placeholder="Enter current password">
            </div>
        </div>
</form>

为什么验证适用于表单名称而不是模型？

1 个答案: