ng-Show nicht angezeigt Wenn die Eingabe ungültig ist

Question

ich Probleme in AngularJS mit Formularvalidierung habe. Ich versuche, ein Div anzuzeigen, basierend darauf, ob eine Eingabe ungültig ist. Angular setzt die korrekten Klassen auf meine Eingaben (ng-touched und ng-invalid), aber es behält immer noch das div mit einer ng-hide Klasse.

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> 

Angularjs

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

bei anderen Fehlern der Suche Ich stellte sicher, dass die ng-Show war die formName.inputName verwenden und dass die App und Controller waren richtig funktionieren. Die Schaltfläche ist korrekt deaktiviert, wenn das Formular ungültig ist, was zu der Annahme führt, dass Controller und App nicht das Problem sind.

Ich versuchte ng-Nachrichten verwendet, die mein Telefon Teil des Formulars noch

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

Eckige zu

geändert wird, die richtigen Klassen mit dem Eingang hinzugefügt, aber es ist die Anzeige noch nicht. Ich glaube, das ng-if bewertet falsch. Merkwürdig ist, dass, wenn ich

{{contactForm.phone.$dirty}} 

in der Konsole ausgeführt wird, es kommt wieder als undefiniert

Answer 1

hier Werfen Sie einen Blick und sehen Sie, wie ich sie habe zu arbeiten. Ich werde die folgenden Schritte aufschlüsseln. https://plnkr.co/edit/LJYurBObZsS6ptlVKxvP?p=preview

Mit dem Wechsel ng-Nachrichten zu verwenden, müssen Sie das Modul in Ihrer Anwendung aufzunehmen. Ich war mir nicht sicher, ob du diese Änderung vorgenommen hast oder nicht, aber es ist einfach. Fügen Sie das Skript für die Bibliothek hinzu, und aktualisieren Sie dann Ihre Module so, dass ngMessages als Abhängigkeit enthalten ist.

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

Der zweite Teil ist ein Tippfehler zu fixieren. In Ihrem HTML für die Kontaktmethode Bereich haben Sie

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

Sie Wiederverwendung den Namen „Telefon“ gibt, die Probleme verursachen wird, da Sie zwei verschiedene Formularelemente mit dem gleichen Namen haben werden. Vermutlich ändere diese Eingaben in emailPreference und phonePreference oder etwas klar zu sein.

Sobald ich, dass aufgeräumt, es begann zu arbeiten. Also ich glaube du warst alle da, nur dieser Tippfehler hat dich erwischt.