버튼을 클릭하면 유효성 확인 메시지가 표시됩니다.

Question

달성하고자하는 것은 상당히 간단하다고 생각합니다. 예를 들어 필수 입력란 (예 : 선택 입력)을 사용하여 폼을 만들어 보겠습니다. 어쨌든 정확히 동일한 상황입니다.

단추를 클릭 할 때만 ng-messages을 표시하려고합니다. 버튼을 클릭하기 전에 양식 필드를 터치하면 잘 동작합니다. 그러나 양식 필드가 $untouched 인 경우이를 수행 할 수 없습니다.

양식 필드에 프로그래밍 방식으로 $touched을 설정했지만 문제가 해결되지 않으면 해결할 방법이 있는지 궁금합니다. 참조

// Any way to avoid this line?? 
$scope.myForm.favoriteColor.$setTouched(); 
// 

코드 :

HTML :

<md-input-container> 
    <label>Favorite Color</label> 
    <md-select name="favoriteColor" ng-model="favoriteColor" required> 
     <md-option value="red">Red</md-option> 
     <md-option value="blue">Blue</md-option> 
    </md-select> 
    <div class="errors" ng-messages="myForm.favoriteColor.$error" ng-show="validateWithHack"> 
     <div ng-message="required">Required</div> 
    </div> 
</md-input-container> 

JS :

$scope.validateWithHack = function() { 
    if ($scope.myForm.$valid) { 
    alert('Form is valid.'); 
    } else { 
    // Any way to avoid this line?? 
    $scope.myForm.favoriteColor.$setTouched(); 
    // 
    $scope.validateWithHack = true; 
    } 
}; 

나는이 각 물질의 이전 버전으로 작업 된 것을 확신합니다. 이제는 최신 1.1.1을 사용하고 있습니다.

여기에 문제가 쉽게 재현 될 수있는 plunker입니다.

미리 감사드립니다.

Answer 1

확인 CodePen

내가 양식에 novalidate를 추가하고 md-button

편집에 type="submit"을 추가 한 2 : type="submit" 버튼은 실제로 양식을 제출 트리거 등 각 양식이 처음 자체의 유효성을 확인 , 우리가해야 할 일은 제출을 막고 유효성 확인을하는 것입니다.

novalidate

폼에 (그냥 HTML5 유효성 검사를이 표시되지 않도록)과에 type="submit"을 추가하여 md-button :이 확인하고 방지 형태를 <md-button>- ng-click="submitMethod(<yourForm>, $event)"를 추가 제출

같은 방법을 정의하려면 양식을 양식의 유효성을 검사 및 제출

$scope.submitMethod(form,ev){ 
    ev.preventDefault(); 
    //rest of your form work say if you want to do ajax or anything you like 
    //check if form valid using form.$invalid 
}