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

Coding Duchess · Accepted Answer · 2016-05-26 17:57:19Z

1

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

answered May 26, 2016 at 17:57

Coding Duchess

7,01927 gold badges146 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike · Accepted Answer · 2016-05-24 20:05:50Z

0

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

answered May 24, 2016 at 20:05

Mike

1,6573 gold badges14 silver badges21 bronze badges

2 Comments

Coding Duchess Over a year ago

did not make any difference

Mike Over a year ago

ng-required="(myvar=='Test' ? 'true' : 'false')" is an alternative. But if you weren't getting a response with just required or ng-required='true', then I suspect it could be that these are all correct. I presume this is an html5 brower?

Collectives™ on Stack Overflow

AngularJS ng-required attribute not working with conditional validation

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related