ng-show表示されない入力が無効な場合

Question

AngularJSでフォームの検証に問題があります。入力が無効かどうかに基づいてdivを表示しようとしています。 Angularは入力に正しいクラスを入れていますが（ng-touchおよびng-invalid）、ng-hideクラスでdivを保持しています。他のエラーを見てみると

form.html

   <form id="" name="contactForm" 
       ng-submit="postForm()" novalidate> 
       <div class="form-group row"> 
        <label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Name</label> 
        <div class="col-lg-10 col-md-9 col-xs-8"> 
         <input class="form-control" type="text" placeholder="Jon Doe" 
          id="full-name" required data-ng-model="formData.name"> 
        </div> 
       </div> 
<!-- This is the only input implemented with the errors --> 
       <div class="form-group row"> 
        <label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Phone 
         Number</label> 
        <div class="col-lg-10 col-md-9 col-xs-8"> 
         <input class="form-control" type="tel" 
          placeholder="(630) 555-6723" id="phone-number" required 
          data-ng-model="formData.phone" name="phone" ng-minlength="10"/> 
          </div> 
         <div ng-show="(contactForm.phone.$invalid && contactForm.phone.$touched) || contactForm.phone.$error.minlength">Please enter a valid phone 
          number.</div> 

       </div> 
       <div class="form-group row"> 
        <label for="email" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Email</label> 
        <div class="col-lg-10 col-md-9 col-xs-8"> 
         <input class="form-control" type="email" 
          placeholder="jon.doe@gmail.com" id="email" required 
          data-ng-model="formData.email" /> 
         <div class="invalid-feedback">Please enter a valid email.</div> 
        </div> 
       </div> 
       <div class="form-group row"> 
        <label class="col-2 col-form-label">Contact Method</label> 
        <div class="col-lg-2 col-md-3 col-xs-4"> 
         <label class="custom-control custom-radio"> <input 
          id="radio1" name="email" type="radio" 
          class="custom-control-input" checked="checked" 
          data-ng-model="formData.pref"> <span 
          class="custom-control-indicator"></span> <span 
          class="custom-control-description">Email</span> 
         </label> <label class="custom-control custom-radio"> <input 
          id="radio2" name="phone" type="radio" 
          class="custom-control-input" data-ng-model="formData.pref"> 
          <span class="custom-control-indicator"></span> <span 
          class="custom-control-description">Phone</span> 
         </label> 
        </div> 
       </div> 
       <div class="form-group row"> 
        <label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Body</label> 
        <div class="col-lg-10 col-md-9 col-xs-8"> 
         <textarea rows="15" class="form-control" 
          placeholder="Type your message here..." id="body-text" required 
          data-ng-model="formData.body"></textarea> 
         <div class="invalid-feedback">Please enter a message here.</div> 
        </div> 
       </div> 
       <div class="text-center"> 
        <button ng-disabled="contactForm.$invalid" class="btn-primary btn" type="submit">Submit</button> 
       </div> 
      </form> 
</div> 

angular.js

<!-- SCRIPTS --> 
<script> 
    //form validate 

    var app = angular.module('contactUs', []); 
    app.controller('formCtrl', function($scope, $http) { 
     $scope.formData = {}; 
     $scope.postForm = function() { 
      $('#loadingScreen').modal('show'); 
      $http({ 
       url : '/api/v1/contact', 
       method : 'POST', 
       data : $.param($scope.formData), 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
      }) 
      .then(function onSuccess() { 
       console.log("success"); 
       window.scrollTo(0,0); 
       $('#success-message').show(); 
      }, function onError(){ 
       console.log("error"); 
       window.scrollTo(0,0); 
       $('#error-message').show(); 
      }) 
      .then(function() { 
       $('#loadingScreen').modal('hide'); 
      }) 
     } 
     $scope.formData = {}; 
    }); 
</script> 

私はNG-ショーはformName.inputNameを使用していたことを確認しましたし、アプリとコントローラがあったこと正しく動作します。フォームが無効なときにボタンが正しく無効になっているため、コントローラとアプリが問題ではないと私は信じています。

は私が

<div class="form-group row"> 
        <label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Phone 
         Number</label> 
        <div class="col-lg-10 col-md-9 col-xs-8"> 
         <input class="form-control" type="tel" 
          placeholder="(630) 555-6723" id="phone-number" required 
          data-ng-model="formData.phone" name="phone" ng-minlength="10"/> 
          </div> 
         <div ng-messages="contactForm.phone.$error" class="error" ng-if="contactForm.phone.$dirty"> 
          <div ng-message="required">Please enter a phone number we can reach you at.</div> 
          <div ng-message="pattern">Please enter a valid phone number here.</div> 
          <div ng-message="minlength">Please enter a phone number that's atleast 10 digits</div> 
         </div> 

       </div> 

まだ入力に正しいクラスを追加された角度にフォームの私の携帯電話の一部を変更し、NG-のメッセージを使用してみましたが、それはまだ表示されていません。私はng-ifがfalseを評価していると信じています。私はコンソールに

{{contactForm.phone.$dirty}} 

を実行したときに奇妙なことに、それが戻って

Answer 1

はここを見て、あなたは、私はそれが働いてしまったか見ることができるように未定義来ています。私は以下の手順を打ち破ります。 https://plnkr.co/edit/LJYurBObZsS6ptlVKxvP?p=preview

ng-messagesを使用するように変更されたため、そのモジュールをアプリに含める必要があります。この変更をしたかどうかはわかりませんでしたが、それは簡単です。ライブラリのスクリプトをインクルードし、モジュールを更新してngMessagesを依存関係として追加します。

var app = angular.module('contactUs', ['ngMessages']); 

2番目の部分は、タイプミスを修正しています。接触方式のエリアのためのあなたのhtmlで、あなたはあなたが同じ名前を持つ2つの異なる形式のアイテムを持っていますので、問題を引き起こすしようとしている、そこに名前「電話」を再利用している

<label class="custom-control custom-radio"> 
     <input id="radio2" name="phone" type="radio" class="custom-control-input" data-ng-model="formData.pref"> 
     <span class="custom-control-indicator"></span> 
     <span class="custom-control-description">Phone</span> 
</label> 

を持っています。おそらく、これらの入力をemailPreferenceやphonePreferenceなどに変更してください。

私はそれをきれいにするとすぐに動作し始めました。だから私はあなたがそこにいたと思う。ちょうどこのタイプミスがあなたに届いていた。