Concealing/revealing placeholder text in Angular applications

Question

Concealing/revealing placeholder text in Angular applications

Can anyone help me figure out how to display hint text below an input only if the input is error-free on $error? I've tried using ngShow/Hide and $valid/$invalid but it's not working as expected.

<div ng-form="reg.form" name="reg.form" novalidate>
   <md-input-container flex="100">
      <label>{{"views.application.mobile.label" | translate}}</label>
      <input type="tel" ng-model="reg.user.mobile" name="mobile" required
             ng-pattern="/(^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)/">
      <div ng-show="???" class="hint">e.g. 0400123123</div>
      <div ng-messages="reg.form.mobile.$error">
        <p class="help-block" ng-message="required">{{"views.application.mobile.error.required" | translate}}</p>
        <p class="help-block" ng-message="pattern">{{"views.application.mobile.error.invalid" | translate}}</p>
      </div>
    </md-input-container>
</div>

javascript angularjs validation angular-material

Answer 1

Answer №1

To ensure the hint is displayed initially and validation errors kick in on blur, I recommend using a combination of $untouched and $error. When the field is "touched", the hint will continue to be displayed unless input is invalid. You can implement this as follows:

<div ng-show="reg.form.mobile.$untouched || (!reg.form.mobile.$error.required && !reg.form.mobile.$error.pattern)"
    class="hint">
    e.g. 0400123123
</div>

Answer 2

To ensure the hint is displayed initially and validation errors kick in on blur, I recommend using a combination of $untouched and $error. When the field is "touched", the hint will continue to be displayed unless input is invalid. You can implement this as follows:

<div ng-show="reg.form.mobile.$untouched || (!reg.form.mobile.$error.required && !reg.form.mobile.$error.pattern)"
    class="hint">
    e.g. 0400123123
</div>

Answer 3

Answer №2

Check out this demonstration for assistance: http://plnkr.co/edit/lbiKfYbkZJWSu5oUmsAe?p=preview

If the field is left empty, an 'Error message' will appear; otherwise, a 'hint message' will be displayed. Below you'll find the corresponding HTML & JS code.

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2849464f5d44495a06425b6819061d0650">[email protected]</a>" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="userForm" novalidate>
      <label>
        First Name: <br/>
        <input name="firstname" type="text" ng-model="user.firstName" required><br />
        <span class="error" ng-show="userForm.firstname.$error.required">Please enter First name<br /></span>
        <span class="hint" ng-show="!userForm.firstname.$error.required">Hint: First name cannot be left blank<br /></span><br />
      </label>
      <label>
        Last Name: <br/>
        <input name="lastname" type="text" ng-model="user.lastName" required><br />
        <span class="error" ng-show="userForm.lastname.$error.required">Please enter Last name<br /></span>
        <span class="hint" ng-show="!userForm.lastname.$error.required">Hint: Last name cannot be left blank<br /></span><br />
      </label>
      <button ng-click="submitUser()">Submit</button>&nbsp;<button>Cancel</button>
    </form>
    <pre>{{ user|json }}</pre>
  </body>

</html>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.isSubmitted = false;
  $scope.submitUser = function() {
    $scope.isSubmitted = true;
  };
});

Answer 4

Check out this demonstration for assistance: http://plnkr.co/edit/lbiKfYbkZJWSu5oUmsAe?p=preview

If the field is left empty, an 'Error message' will appear; otherwise, a 'hint message' will be displayed. Below you'll find the corresponding HTML & JS code.

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2849464f5d44495a06425b6819061d0650">[email protected]</a>" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="userForm" novalidate>
      <label>
        First Name: <br/>
        <input name="firstname" type="text" ng-model="user.firstName" required><br />
        <span class="error" ng-show="userForm.firstname.$error.required">Please enter First name<br /></span>
        <span class="hint" ng-show="!userForm.firstname.$error.required">Hint: First name cannot be left blank<br /></span><br />
      </label>
      <label>
        Last Name: <br/>
        <input name="lastname" type="text" ng-model="user.lastName" required><br />
        <span class="error" ng-show="userForm.lastname.$error.required">Please enter Last name<br /></span>
        <span class="hint" ng-show="!userForm.lastname.$error.required">Hint: Last name cannot be left blank<br /></span><br />
      </label>
      <button ng-click="submitUser()">Submit</button>&nbsp;<button>Cancel</button>
    </form>
    <pre>{{ user|json }}</pre>
  </body>

</html>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.isSubmitted = false;
  $scope.submitUser = function() {
    $scope.isSubmitted = true;
  };
});

Concealing/revealing placeholder text in Angular applications

Answer №1

Answer №2

Similar questions

What steps should be taken once the idToken in Firebase has expired?

Tips for organizing and validating a collection of user-input responses using MongoDB and express

Steps to extract the input value using Selenium IDE

manipulating child element's innerHTML with javascript

Leveraging ng-class for selectively applying CSS3 animations based on conditions

Is there a way to round a number in JavaScript with negative precision similar to the rounding function in Excel?

Secure your JavaScript file with encryption

Retrieve the prior position using the AngularJS ui-router

The functions Show() and Hide() may not work in all scenarios within jQuery

Choosing the value in a dropdown menu depending on the property value of an object using the select and angular methods

Apply a chosen style to the element that was clicked on, while removing the style from the rest

Error: The function is undefined and cannot be referenced

Is there a framework available to animate Pseudo CSS elements?

toggle classes using jQuery when a link is clicked

"Challenges in Three.js: Solving Problems with Geometric Shapes and Internal

Removing an article from a Vue.js localStorage array using its index position

The onSubmit function is resistant to updating the state

AngularJS dynamic data presents challenge in reloading Jquery data tables

'Invalid parameters' error triggered by bcrypt-nodejs - Passport

Utilizing Angular's promise rejection chaining method