Angular JS textarea validation

Question

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.

HDJEMAI · Accepted Answer · 2017-08-18 00:53:48Z

27

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.

edited Aug 18, 2017 at 0:53

HDJEMAI

9,84848 gold badges78 silver badges99 bronze badges

answered Nov 4, 2012 at 12:04

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

2 Comments

azec.me Over a year ago

Thank you. I was thinking it uses id.

Tomas Jansson Over a year ago

This helped me a lot. But I think there is something weird going on at the same time. I can leave out the name attribute on a text input field and the validation will work just fine, but the textarea require me to have it there.

Mahib · Accepted Answer · 2017-08-25 01:30:26Z

0

For form validation name is very important. Give it a name it should work.

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

answered Aug 25, 2017 at 1:30

Mahib

4,0936 gold badges58 silver badges65 bronze badges

Collectives™ on Stack Overflow

Angular JS textarea validation

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related