CODEWITHSUNDEEP
angularjshtml
Manojprabakar
Manojprabakar

Reputation: 3

Hide tooltip with message in angular js with required field validator

I need to show/hide a tooltip states of an input field: “This is a required field”. I am using a ng-required input tag.

 <form novalidate  name="CustAddressDetails">
<input type="text" name="txtResAddressLine1"  id="txtResidentialAddress1" ng-model="Address1" ng-required="true" />
<span ng-show="ShowAddressErrorMsg && CustAddressDetails.txtResAddressLine1.$error.required">Please enter the Residential Address.</span>
</form>

Upvotes: 0

Views: 703

Answers (1)

Kalaiselvan
Kalaiselvan

Reputation: 2134

here I have removed ShowAddressErrorMsg because once your form is valid you need to change it manually

     var app = angular.module('testApp',[]);
        app.controller('testCtrl',function($scope){

        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="testApp" ng-controller="testCtrl">
    <form name="CustAddressDetails">
    <input type="text" name="txtResAddressLine1" id="txtResidentialAddress1" required ng-model="Address1" />
    <span ng-show="CustAddressDetails.txtResAddressLine1.$pristine || 
     CustAddressDetails.txtResAddressLine1.$untouched ||
       (CustAddressDetails.txtResAddressLine1.$touched || 
        CustAddressDetails.txtResAddressLine1.$invalid)">Pleas‌e enter the Residential Address.</span>
    <input type="submit"/>      
    </form>
    </div>

Upvotes: 1

Related Questions