Показывать сообщения о проверке при нажатии кнопки

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 в форму и добавил type="submit" к вашему md-button

Edit 2: Кнопка type="submit" фактически запускает отправки формы и поэтому угловая форма подтверждает себя первым , Что нам нужно сделать, так это предотвратить отправку и просто выполнить проверку.

novalidate (Просто чтобы подавить проверку HTML5) в форму и добавил type="submit" к вашему md-button: Это будет проверять форму и отправить форму, чтобы проверить и предотвращения отправки формы добавления ng-click="submitMethod(<yourForm>, $event)" в <md-button> и определить метод как

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