Question

如果zipcode为空，则表单无效，因此按钮被禁用但如果zipcode为2位数，则显示错误消息，但表单在控制器中显示为有效。如果zipcode是空的，那么我需要禁用按钮，但我检查表格是否有效，但不要担心ng-disabled。我只需要解决方案来显示＆＃34; div＆＃34;当且仅当表格有效。

＆＃13;

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

＆＃13;

            <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>

＆＃13;

提前致谢。

Answer 1

我假设您提供了<form>包装HTML。

如果是这样，您应该确保<form＆gt;标签已应用novalidate，因此您使用的是AngularJS表单验证，而不是HTML5表单验证：

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

此外，您似乎正在将HTML5验证属性与AngularJS验证属性混合使用。您应该使用ng-required和ng-pattern代替required和pattern。

表格。$ valid适用于＆＃34;必需＆＃34;但它不适用于ngPattern和maxlength。

1 个答案: