AngularJS ng-required attribute not working with conditional validation

Question

<form name="frm1" class="col s12">
<div class="row">
<p>{{myvar}}</p>
</div>

<div class="row">
    <div class="input-field col s12">
        <input id="text1" ng-model="Note" ng-required="myvar=='Test'"></input>
    <span ng-show="frm1.text1.$error.required">Please leave a note</span>
        </div>
</div> 
<div class="row">               
    <input type="button" value="Enter" ng-click="GoNext(Note)" />
</div>
</form>

I have the above code on my page in my AngularJS application. The idea was to make ng-required conditional - the text field should only be required and display validation only if variable myvar equals to a particular value - Test. In all other cases the field should remain non-required.

Thinking something might be wrong with my validation condition, I tried:

<form name="frm1" class="col s12">
<div class="row">
<p>{{myvar}}</p>
</div>

<div class="row">
<div class="input-field col s12">
        <input id="text1" ng-model="Note" required></input>
    <span ng-show="frm1.text1.$error.required">Please leave a note</span>
     </div>
</div> 
<div class="row">               
<input type="button" value="Enter" ng-click="GoNext(Note)" />
</div>
</form>

And I also tried:

<form name="frm1" class="col s12">
<div class="row">
<p>{{myvar}}</p>
</div>

<div class="row">
<div class="input-field col s12">
        <input id="text1" ng-model="Note" ng-required="true"></input>
    <span ng-show="frm1.text1.$error.required">Please leave a note</span>
     </div>
</div> 
<div class="row">               
<input type="button" value="Enter" ng-click="GoNext(Note)" />
</div>
</form>

But still no validation has been displayed

UPDATE: I have fixed the issue by changing a button to a submit button

Answer 1

I have fixed the issue by changing a button to a submit button

Answer 2

Add a type to the input: type="text"