Display validation message on submitting the form in Angularjs

Question

I want to display validation message after user clicks on the submit form. Eg Text box is required and user directly clicks on the submit button then the validation field should be displayed.

Here when the user clicks on the form nothing happens.

<body ng-controller="AppController as ctrl">

<form ng-submit="ctrl.submit()" name="myForm" novalidate>
    <input type="text" ng-model="ctrl.user.username" name="uname" class="username" placeholder="Enter your name" required ng-minlength="3" />
    <span ng-show="myForm.$dirty && myForm.uname.$error.required">This is a required field</span>

    <input type="text" ng-model="ctrl.user.address" placeholder="Enter your Address" /><br /><br />

    <input type="email" ng-model="ctrl.user.email" name="email" class="email" placeholder="Enter your Email" required />
    <span ng-show="myForm.$dirty && myForm.email.$error.required">This is a required field</span>

    <input type="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
</script>
<script>
    angular.module('myApp', [])
    .controller('AppController', [function () {
        var self = this;
        self.submit = function () {
            console.log('Form is submitted with following user', self.user);
        };
    }]);
</script>

Pankaj Parkar · Accepted Answer · 2017-07-30 12:18:26Z

2

When angular submit a form it make $submitted property on form level to true, also it adds ng-submitted class on form's class attribute.

You could use $submitted property of form object like myForm.$submitted to identify that form has been submitted or not

ng-show="myForm.$submitted && myForm.uname.$error.required"

Demo Plunker

edited Jul 30, 2017 at 12:18

answered Jul 30, 2017 at 12:09

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Dave Over a year ago

Thanks,am am learning angular 1 can you suggest some useful links.

Collectives™ on Stack Overflow

Display validation message on submitting the form in Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related