Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular JS textarea validation

I have this AngularJS code trying to show two stars next to label when there is no text in the textarea. Same code works for input tags, but not with textarea.

<div class="input-left">
    <label for="email">
        <span ng-show="contactform.email.$error.required" class="required">*</span>Email:
    </label>
    <input ng-model="email" type="text" name="email" id="email" required></br></br>
    <label for="budget">Budzet:</label>
    <input ng-model="budget" type="text" name="budget" id="budget">
</div>
<div class="clearboth">
    <label for="msg" class="left" >
        <span ng-show="contactform.msg.$error.required" class="required">**</span>Pitanja ili Komentari?
    </label>
    <textarea ng-model="msg" rows="8" cols="50" class="input-no-width rounded shaded left clearboth" id="msg" required></textarea>
</div>

According to AngularJS documentation - textarea should behave same as input.

like image 255
azec-pdx Avatar asked Nov 04 '12 11:11

azec-pdx


1 Answers

Your problem with the <textarea> tag is that it doesn't define name attribute.

AngularJS uses the name attribute to expose validation errors.

You should define your textarea like so:

<textarea ng-model="msg" name="msg" rows="8" cols="50"
          class="input-no-width rounded shaded left clearboth" id="msg" required>
</textarea>

Please note that having id and ng-model is not enough to properly handle validation messages. In AngularJS applications the id attribute often doesn't serve much purpose and could be omitted.

like image 120
pkozlowski.opensource Avatar answered Oct 08 '22 21:10

pkozlowski.opensource