I think what I want to achieve is quite simple. Let's have a form with a required field, a select for instance (I've also tried it with an input and it's exactly the same situation anyway).
I want to display the ng-messages
only when a button is clicked. If the form field was touched before clicking the button, it works fine. But I cannot do it if the form field is $untouched
.
I've solved it setting programatically $touched
to the form field, but I'm wondering if there is any way to solve it without this uggly 'hack'.
// Any way to avoid this line??
$scope.myForm.favoriteColor.$setTouched();
//
Code for reference:
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;
}
};
I'm pretty sure that this was working with previous versions of angular-material. Now I'm using the latest 1.1.1.
Here is a plunker where the problem can be easily reproduced.
Thanks in advance.