form.$valid 适用于“必需”，但不适用于 ngPattern 和 maxlength。

Question

如果邮政编码为空，则表单无效，因此按钮被禁用，但如果邮政编码为 2 位，则会显示错误消息，但表单在控制器中显示为有效。如果邮政编码为空，那么我需要禁用按钮，但我正在检查表单是否有效，但不要担心 ng-disabled。当且仅当表单有效时，我才需要显示“div”的解决方案。

 function submitUserDetail (formValid) {
      if(formValid) {
      $scope.showDiv = true;
      }
    }

            <div class="">
                <div class="">
                    <label required>
                        Zip code required
                    </label>
                    <label pattern>
                        Invalid Zip code
                    </label>
                </div>
                <div class="">
                    <input type="tel" maxlength="5" class="" name="zip5"
                           ng-model="userDetail.zipCode" required=""
                           pattern="^\d{5}$"
                           data-validate-on-blur="true" value=""
                           size="5">
                    <span class="" title="Reset" onclick="jQuery(this).prev('input').val('').trigger('change');"></span>
                </div>
            </div>        
        
        
        <div class="">
            <div class="">
                <div class="">
                    <span class=""></span>
                    <button class="" href="#" id="button" ng-click="submitUserDetail(form.$valid)" ng-disabled="form.$invalid">See section</button>
                    <span class=""></span>
                </div>
            </div>
        </div>
        
        <div ng-if="showDiv">
        .......
        </div>

提前致谢。

Answer 1

我假设您有一个 <form> 包装所提供的 HTML。

如果是这样，您应该确保您的 <form> 标签已应用 novalidate，以便您使用 AngularJS 表单验证而不是 HTML5 表单验证：

 <form name="form" ng-submit="submitUserDetail(form.$valid)" novalidate>

此外，您似乎将 HTML5 验证属性与 AngularJS 验证属性混合在一起。您应该使用ng-required 和ng-pattern 而不是required 和pattern。