Today our leading topic is add form validation with ng-messages. So you can simply use with registration form, login form, contact form etc of angular. we will use required, minlength, maxlength, email, password etc validation on form submit by button clicking in angular js example.
we will create form with name, email and password fields, make simple realtime validation using angular js. we will display instant error message. we also use bootstrap for design and make it better layout.
I write full example of angular js form validation for beginner. So, let's check bellow example code and do it.
Example:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Form Validation using ngMessages Example - HDTuto.com</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
</head>
<body ng-app="hdTutoApp" ng-controller="HDTutoController as hdTuto">
<div class="container" style="width:600px">
<div class="page-header">
<h3>AngularJS Form Validation using ngMessages Example - HDTuto.com</h3>
</div>
<form name="myForm" novalidate>
<div class="form-group" ng-class="{ 'has-error' :
myForm.myName.$touched && myForm.myName.$invalid }">
<label>Name*</label>
<input type="text" name="myName" class="form-control"
ng-model="hdTuto.name" ng-minlength="3" ng-maxlength="8" required>
<div class="help-block" ng-messages="myForm.myName.$error"
ng-if="myForm.myName.$touched">
<p ng-message="required">Your name is required.</p>
<p ng-message="minlength">Your name is too short.</p>
<p ng-message="maxlength">Your name is too long.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' :
myForm.userName.$touched && myForm.userName.$invalid }">
<label>UserName(email)*</label>
<input type="email" name="userName" class="form-control"
ng-model="hdTuto.userName" required>
<div class="help-block" ng-messages="myForm.userName.$error"
ng-if="myForm.userName.$touched">
<p ng-message="required">This field is required</p>
<p ng-message="email">Please enter a valid email.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' :
myForm.password.$touched && myForm.password.$invalid }">
<label>Password*</label>
<input type="password" name="password" class="form-control"
ng-model="hdTuto.password" ng-minlength="6" ng-maxlength="8"
required>
<div class="help-block" ng-messages="myForm.password.$error"
ng-if="myForm.password.$touched">
<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="email">This needs to be a valid email</p>
<p ng-message="password">This needs to be a valid password</p>
</div>
</div>
<button type="submit" class="btn btn-primary"
ng-disabled="myForm.$invalid">
Submit
</button>
</form>
</div>
<script type="text/javascript">
var hdTutoApp = angular.module('hdTutoApp', ['ngMessages']);
hdTutoApp.controller('HDTutoController', function($scope) {
});
</script>
</body>
</html>
I hope you found your best...
Do you like below Tutorials ?
- How to Display Data in Angular 10?
- Angular 10 Routing Module Example Tutorial
- Angular 10 CRUD Operations with Web API Example
- Laravel 8 CRUD Operation Step By Step Tutorial
- Solved - Target class [ProductController] does not exist in Laravel 8
- Step by Step Form Validation in Laravel 8 Example
- Laravel 8 Image Upload with Preview Example
- Laravel 8 Multiple Images Upload with Preview Example