Display validation messages when a button is clicked
<p>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).</p>

<p>I want to display the <code>ng-messages</code> 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 <code>$untouched</code>.</p>

<p>I've solved it setting programatically <code>$touched</code> to the form field, but I'm wondering if there is any way to solve it without this uggly 'hack'.</p>

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

<p>Code for reference:</p>

<p>HTML:</p>

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

<p>JS:</p>

<pre><code>$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;
  }
};
</code></pre>

<p>I'm pretty sure that this was working with previous versions of angular-material. Now I'm using the latest 1.1.1.</p>

<blockquote>
  <p>Here is a <a href="http://codepen.io/anon/pen/LRxdbQ" rel="nofollow">plunker</a> where the
  problem can be easily reproduced.</p>
</blockquote>

<p>Thanks in advance.</p>