AngularJS 1.3-为什么表单在加载时有效，适用于长度最小的输入

AngularJS 1.3 - why is the form valid on load, for inputs with a minimum length?

本文关键字：适用于 输入 有效 为什么 表单 加载 AngularJS      更新时间：2023-09-26

我刚开始使用AngularJS，如果表单有任何无效字段，我希望禁用表单的提交按钮。

我有一个名为"标题"的字段。它要求最小长度为5。加载表单时，AngularJS提供的表单对象报告$invalid: false

<div ng-controller="NewPinCtrl as newPin">
<form role="form" name="formNewPin">
    <div>
        <label>Title</label>
        <input ng-model="newPin.pin.title" ng-minlength="5" ng-maxlength="140" type="text" name="title" value="" placeholder="Title" />
        <ul ng-messages="formNewPin.title.$error" ng-if="formNewPin.title.$dirty">
            <li ng-message="required">This is required</li>
            <li ng-message="minlength">Should be longer than 5 characters</li>
            <li ng-message="maxlength">Should be shorter than 140 characters</li>
        </ul>
    </div>
</form>
</div>

这是我的按钮：

<button ng-click="newPin.savePin()" ng-disabled="formNewPin.$pristine || formNewPin.$invalid" type="button">Submit</button>

好吧，我想，如果表单是$pristine: true，我就禁用按钮。这解决了我的"负载"问题。。。但是当用户清除字段并返回空白时，$invalid报告为false。

当字段显然有最小长度要求时，为什么会出现这种情况？而且，我如何在不单独检查每个表单字段错误的情况下绕过它？

谢谢！

EDIT：我可以补充一点，我正在为1.3 使用这个新的ngMessages

您已经提供了所需错误的消息，但尚未将输入标记为所需。这就是为什么它在第一次加载时被评估为有效的原因。

添加必需的属性后，您将不需要对ng消息使用ng-if。最终的解决方案应该是这样的：

<form name="formNewPin">
    <label>Title</label>
    <input ng-model="newPin.pin.title" required ng-minlength="5" ng-maxlength="140" type="text" name="title" value="" placeholder="Title">
    <ul ng-messages="formNewPin.title.$error">
        <li ng-message="required">This is required</li>
        <li ng-message="minlength">Should be longer than 5 characters</li>
        <li ng-message="maxlength">Should be shorter than 140 characters</li>
    </ul>
  <button ng-click="newPin.savePin()" ng-disabled="formNewPin.$invalid" type="button">Submit</button>
</form>

普朗克。

相关文章：