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']); 

두 번째 부분은 오타가 있습니다. 접촉 방법 영역에 대한 HTML에서, 당신은 당신이 같은 이름을 가진 두 개의 서로 다른 양식 항목을해야하기 때문에 문제가 발생할 것입니다있는이 이름이 "전화"를 재사용하고

<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 또는 뭔가 명확하게 변경하십시오.

내가 정리하자마자 작동하기 시작했습니다. 그래서 네가 거기 있다고 생각해.이 오타가 널 데려왔을 뿐이야.