Ionic & Angular JS form validation show message in placeholder

Question

I'm using Ionic and trying to make a login form with validation, but how can I display the error message in the placeholder of the input box instead of using ng-show? Besides, how to change another element's CSS if the input box was invalid? I've been looking for any documentation online but still don't have a clue, hope anyone can help me out, thanks!

Keep in mind, the placeholder will only display if the input is empty. — SteamDev, Dec 21 '15 at 20:02
yes, I just wanted it to show "Required" after user touched it — 5h177y, Dec 21 '15 at 20:16

score 0 · Answer 1 · answered Dec 21 '15 at 20:28

0

Perhaps a suitable answer would be using ng-touched? The docs for that and other form validation for Angular can be found here: https://docs.angularjs.org/guide/forms

answered Dec 21 '15 at 20:28

yjimk

486
3
9

Sorry I would have preferred this as a comment on your question, but don't quite have the rep level yet to be allowed to do so. – yjimk Dec 21 '15 at 20:29
Thanks for reply, how to use ng-touched for changing the placeholder? and also how to change another element's CSS if the input box is not valid? – 5h177y Dec 21 '15 at 20:37
Hmm. Use ng-touched for the CSS, from this SO post. http://stackoverflow.com/questions/32555792/style-input-placeholder-color-style-with-ng-classes . A simple solution for the placeholder might be to try: placeholder="Enter value here" onblur="this.placeholder='Required'" . – yjimk Dec 21 '15 at 20:54

score 0 · Accepted Answer · answered Dec 21 '15 at 21:47

Angular extends the form element with some extra data which can be accessed via form and input name attributes in the template. https://jsfiddle.net/ttvx446q/

HTML

<div ng-app="myApp">
  <div ng-controller="myForm">

    <!-- form -->
    <form name="formElement" ng-submit="log(user)" novalidate>
      <div class="row">
        <label>
          Name:
          <input type="text" name="name" ng-model="user.name" placeholder="{{formElement.$submitted && formElement.name.$invalid ? 'Invalid name' : 'Default placeholder'}}" required>
        </label>
      </div>
      <div class="row">
        <button type="submit">Submit</button>
      </div>
    </form>

    <!-- output -->
    <h3>Logs:</h3>
    <div class="logs">
      <div>
        <strong>user:</strong> {{user | json}}
      </div>
      <div ng-class="{error: formElement.$submitted && formElement.name.$invalid}">
        <strong>name:</strong> {{formElement.name | json}}
      </div>
    </div>

  </div>
</div>

How to display the error message in the placeholder:

Looking at this line placeholder="{{formElement.$submitted && formElement.name.$invalid ? 'Invalid name' : 'Default placeholder'}}", you'll see the placeholder is a dynamic value which changes based on a ternary operator. If formElement has been submitted and the name input is invalid, the placeholder shows the error message.

How to change another element's CSS if the input is invalid:

Refer to this line ng-class="{error: formElement.$submitted && formElement.name.$invalid}". This applies the class 'error' on the same condition used before.

Thanks, I'm new to angularJS, looks like it makes html a bit messy? — 5h177y, Dec 22 '15 at 04:43
It definitely does, but that's angular templates. You may be able to move some of this logic to your controller by doing something like this http://stackoverflow.com/a/27117176 but if you're just a beginner, the answer above is probably more straight forward — SteamDev, Dec 22 '15 at 04:57

Ionic & Angular JS form validation show message in placeholder

2 Answers2