Zec Zec - 1 month ago 5
AngularJS Question

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.

Answer Source

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.