フォーム。$ validは "required"で動作していますが、ngPatternとmaxlengthでは機能しません。

Question

郵便番号が空の場合はフォームが無効なのでボタンは無効ですが、郵便番号が2桁の場合はエラーメッセージが表示されますが、フォームはコントローラで有効と表示されています。 zipcodeが空の場合は、ボタンを無効にする必要がありますが、有効かどうかを確認していますが、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をラップしているとします。

もしそうなら、あなたはAngularJSを使用しているので、あなたの<form>タグがnovalidateを適用していることを確認する必要があり、検証及びませんHTML5フォーム検証形成：あなたはHTML5の検証を混合しているように見え、また

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

をAngularJS検証属性を持つ属性。 requiredとpatternの代わりにng-requiredとng-patternを使用する必要があります。