AngularJs Form Validation

AngularJs Form Validation

Angularjs form validation - Every form needs validation to prevent our web application from malicious users. If our form doesn’t have a proper validation, that might be one of the main cause of security vulnerabilities.

Angularjs form validation - Every form needs validation to prevent our web application from malicious users. If our form doesn’t have a proper validation, that might be one of the main cause of security vulnerabilities.

Without proper validations expose our web application or website attacks such as SQL injections, header injections, cross-site scripting. In order to get valid data into the database and protect from bots, we need proper validations.

Here we go with AngularJs form Validations:

AngularJs offers client-side validation. AngularJs can observe the state of the form and input fields like input, textarea, select and lets you notify the user about the current state.

AngularJs can hold the information of where users have been touched or modified or not, and we can use standard HTML5 attributes to validate input or you can make your own validation functions.

AngularJs is continuously updating the state of both the form and the input fields.

For input fields we have the following states:

$invalid

It represents the field content is not valid

$valid

It represents the field content is valid

$untouched

It represents the field has not been touched yet

$touched

It represents the field has been touched

$pristine

It represents the field has not been modified yet

$dirty

It represents the field has been modified

All these are properties of the input field and all will give true or false as output. Based on true or false we have to write validation messages.

For forms we have the following states:

$pristine

It represents, No fields have been modified yet.

$dirty

It represents, One or more have been modified.

$invalid

It represents, The form content is not valid.

$valid

It represents, The form content is valid.

$submitted

It represents, The form is submitted.

All these are properties of the form and will give true or false as output.

Here we will develop a form called the customer with a few basic fields of the First name, Middle name, Last name, Email, Phone number, **Address, **and gender. In this blog, we will cover validation examples with these fields.

Required:

To specify that, the input field should be filled up means we have to use the required HTML5 attribute. In this example, field First Name is required.

<!DOCTYPE html>

<html>

<head>

   <meta charset='utf-8'>

   <meta http-equiv='X-UA-Compatible' content='IE=edge'>

   <title>Customer Form</title>

   <meta name='viewport' content='width=device-width, initial-scale=1'>

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

</head>

<body>

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

   <form name="myForm">

       <div class="row">

           <label>First Name:</label>

           <input type="text" ng-model="model.firstName" name="firstName" required>

           <div ng-if="myForm.firstName.$invalid && (myForm.firstName.$dirty || myForm.firstName.$touched )">

               <p style = "color:red" ng-if="myForm.firstName.$error.required"> First Name is required..</p>

           </div>

       </div>

   </form>

   </div>

     

   <script>

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

       app.controller('formCtrl', function($scope) {

           $scope.model = { };

           //$scope.model.firstName = "Chandra Sekhar";

       });

   </script>

</body>

</html>

Output:

We can also put validation for minimum length and maximum length in input by using minlength and maxlength as follows.

<form name="myForm">

   <div class="row">

       <label>First Name:</label>

       <input type="text" ng-model="model.firstName" name="firstName" minlength="3" maxlength="20" required>

       <div ng-if="myForm.firstName.$invalid && (myForm.firstName.$dirty || myForm.firstName.$touched )">

           <p style = "color:red" ng-if="myForm.firstName.$error.required"> First Name is required..</p>

           <p style ="color: red" ng-if="myForm.firstName.$error.minlength"> First Name should contain min 3 characters..</p>

           <p style ="color: red" ng-if="myForm.firstName.$error.maxlength"> First Name should not exceed 20 characters..</p>

       </div>

   </div>

</form>

Here I have given minlength as 3 and maxlength as 20. If we cross the length limits then alerts will fire.

Output:

Number Validation:

Now we will do validation for field Phone number. This field is required, minlengthand maxlength should 10.

<div class="form-group col-md-3">

<label>Mobile Number *</label>

<input type="number" class="form-control" ng-model="model.mobileNumber" name="mobileNumber" minlength="10" maxlength="10" required>

<div ng-if="myForm.mobileNumber.$invalid && (myForm.mobileNumber.$dirty || myForm.mobileNumber.$touched )">

   <p style = "color:red" ng-if="myForm.mobileNumber.$error.required" class="alert alert-danger"> Mobile Number is required..</p>

   <p style ="color: red" ng-if="myForm.mobileNumber.$error.minlength" class="alert alert-danger"> Mobile Number should contain min 10 characters..</p>

   <p style ="color: red" ng-if="myForm.mobileNumber.$error.maxlength" class="alert alert-danger"> Mobile Number should not exceed 10 characters..</p>

</div>

</div>

Output:

Email Validation:

We can do email validation by using input type email. Here, this field is required.

<div class="form-group col-md-3">

   <label>Email *</label>

   <input type="email" class="form-control" ng-model="model.emailId" name="emailId" required>

   <div ng-if="myForm.emailId.$invalid && (myForm.emailId.$dirty || myForm.emailId.$touched )">

       <p style = "color:red" ng-if="myForm.emailId.$error.required" class="alert alert-danger"> Email Id is required..</p>

       <p style="color: red" ng-if="myForm.emailId.$invalid" class="alert alert-danger"> Invalid Email Id</p>

   </div>

</div>

Output:

Note: All the above outputs of the above images are for validation firing and please don’t forget to combine all these codes, anyway I will provide the entire code below with all fields mentioned above.

Please find below code:

<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title> Customer Form </title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
   <h2>Customer Form</h2>
   <br />
   <div ng-app="myApp" ng-controller="formCtrl">
       <div class="container">
           <form name="myForm">
               <div class="row">
                   <div class="form-group col-md-3">
                       <label>First Name *</label>
                       <input type="text" class="form-control" ng-model="model.firstName" name="firstName" minlength="3" maxlength="20" required>
                       <div ng-if="myForm.firstName.$invalid && (myForm.firstName.$dirty || myForm.firstName.$touched )">
                           <p style = "color:red" ng-if="myForm.firstName.$error.required" class="alert alert-danger"> First Name is required..</p>
                           <p style ="color: red" ng-if="myForm.firstName.$error.minlength" class="alert alert-danger"> First Name should contain min 3 characters..</p>
                           <p style ="color: red" ng-if="myForm.firstName.$error.maxlength" class="alert alert-danger"> First Name should not exceed 20 characters..</p>
                       </div>
                   </div>
                   <div class="form-group col-md-3">
                       <label>Middle Name</label>
                       <input type="text" class="form-control" ng-model="model.middleName" name="middleName" minlength="2" maxlength="20">
                       <div ng-if="myForm.middleName.$invalid && (myForm.middleName.$dirty || myForm.middleName.$touched )">
                           <p style ="color: red" ng-if="myForm.middleName.$error.minlength" class="alert alert-danger"> Middle Name should contain min 2 characters..</p>
                           <p style ="color: red" ng-if="myForm.middleName.$error.maxlength" class="alert alert-danger"> Middle Name should not exceed 20 characters..</p>
                       </div>
                   </div>
                   <div class="form-group col-md-3">
                       <label>Last Name *</label>
                       <input type="text" class="form-control" ng-model="model.lastName" name="lastName" minlength="3" maxlength="20" required>
                       <div ng-if="myForm.lastName.$invalid && (myForm.lastName.$dirty || myForm.lastName.$touched )">
                           <p style = "color:red" ng-if="myForm.lastName.$error.required" class="alert alert-danger"> Last Name is required..</p>
                           <p style ="color: red" ng-if="myForm.lastName.$error.minlength" class="alert alert-danger"> Last Name should contain min 3 characters..</p>
                           <p style ="color: red" ng-if="myForm.lastName.$error.maxlength" class="alert alert-danger"> Last Name should not exceed 20 characters..</p>
                       </div>
                   </div>
                   <div class="form-group col-md-3">
                       <label> Mobile Number * </label>
                       <input type="number" class="form-control" ng-model="model.mobileNumber" name="mobileNumber" minlength="10" maxlength="10" required>
                       <div ng-if="myForm.mobileNumber.$invalid && (myForm.mobileNumber.$dirty || myForm.mobileNumber.$touched )">
                           <p style = "color:red" ng-if="myForm.mobileNumber.$error.required" class="alert alert-danger"> Mobile Number is required..</p>
                           <p style ="color: red" ng-if="myForm.mobileNumber.$error.minlength" class="alert alert-danger"> Mobile Number should contain min 10 characters..</p>
                           <p style ="color: red" ng-if="myForm.mobileNumber.$error.maxlength" class="alert alert-danger"> Mobile Number should not exceed 10 characters..</p>
                       </div>
                   </div>
                   <div class="form-group col-md-3">
                       <label>Email *</label>
                       <input type="email" class="form-control" ng-model="model.emailId" name="emailId" required>
                       <div ng-if="myForm.emailId.$invalid && (myForm.emailId.$dirty || myForm.emailId.$touched )">
                           <p style = "color:red" ng-if="myForm.emailId.$error.required" class="alert alert-danger"> Email Id is required..</p>
                           <p style="color: red" ng-if="myForm.emailId.$invalid" class="alert alert-danger"> Invalid Email Id</p>
                       </div>
                   </div>
                   
               </div>
               <div class="col-md-3">
                       <button type="submit" class="btn btn-success">Submit</button>
                   </div>
           </form>
       </div>
   </div>
     
   <script>
       var app = angular.module('myApp', []);
       app.controller('formCtrl', function($scope) {
           $scope.model = { };
           //$scope.model.firstName = "Chandra sekhar";
       });
   </script>
</body>
</html>

Now, If you run this code in your machine, the entire form will look like below:

If all validations are fired, then our form will look like this.

If you’ve any doubts, please let us know through comment!!

What are the best alternatives for angular js?

<img src="https://moriohcdn.b-cdn.net/193902114c.png">There are numerous frameworks and libraries used across the globe. If not angular, there are platforms like React, Vue, Aurelia and so on for app development.

There are numerous frameworks and libraries used across the globe. If not angular, there are platforms like React, Vue, Aurelia and so on for app development.

Angular 8 Node & Express JS File Upload

Angular 8 Node & Express JS File Upload

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

We are also going to take the help of Node.js to create the backend server for Image or File uploading demo. Initially, we’ll set up an Angular 8 web app from scratch using Angular CLI. You must have Node.js and Angular CLI installed in your system.

We’ll create the local server using Node.js and multer middleware. Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. Once we are done setting up front-end and backend for our File uploading demo then, we’ll understand step by step how to configure file uploading in Angular 8 app using Node server.

Prerequisite

In order to show you Angular 8 File upload demo, you must have Node.js and Angular CLI installed in your system. If not then check out this tutorial: Set up Node JS

Run following command to install Angular CLI:

npm install @angular/cli -g

Install Angular 8 App

Run command to install Angular 8 project:

ng new angular-node-file-upload

# ? Would you like to add Angular routing? No
# ? Which stylesheet format would you like to use? CSS
cd angular-node-file-upload

Show Alert Messages When File Uploaded

We are going to install and configure ngx-toastr an NPM package which helps in showing the alert message when the file is uploaded on the node server.

npm install ngx-toastr --save

The ngx-toastr NPM module requires @angular/animations dependency:

npm install @angular/animations --save

Then, add the ngx-toastr CSS in angular.json file:

"styles": [
    "src/styles.css",
    "node_modules/ngx-toastr/toastr.css"
]

Import BrowserAnimationsModule and ToastrModule in app.module.ts file:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
 
@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot() // ToastrModule added
  ]
})

export class AppModule { }

Install & Configure ng-file-upload Directive

In this step, we’ll Install and configure ng-file-upload library in Angular 8 app. Run command to install ng-file-upload library.

npm install ng2-file-upload

Once the ng2-file-upload directive is installed, then import the FileSelectDirective and FormsModule in app.module.ts. We need FormsModule service so that we can create the file uploading component in Angular.

import { FileSelectDirective } from 'ng2-file-upload';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    FileSelectDirective
  ],
  imports: [
    FormsModule
  ]
})

export class AppModule { }

Setting Up Node Backend for File Upload Demo

To upload the file on the server, we need to set up a separate backend. In this tutorial, we will be using Node & Express js to create server locally along with multer, express js, body-parser, and dotenv libraries.

Run command to create backend folder in Angular app’s root directory:

mkdir backend && cd backend

In the next step, create a specific package.json file.

npm init

Run command to install required dependencies:

npm install express cors body-parser multer dotenv --save

In order to get rid from starting the server again and again, install nodemon NPM package. Use –-save-dev along with the npm command to register in the devDependencies array. It will make it available for development purpose only.

npm install nodemon --save-dev

Have a look at final pacakge.json file for file upload demo backend:

{
  "name": "angular-node-file-upload",
  "version": "1.0.0",
  "description": "Angualr 8 file upload demo app",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "Digamber Rawat",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.0.0",
    "express": "^4.17.1",
    "multer": "^1.4.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

Create a file by the name of server.js inside backend folder:

Configure Server.js

To configure our backend we need to create a server.js file. In this file we’ll keep our backend server’s settings.

touch server.js

Now, paste the following code in backend > server.js file:

const express = require('express'),
  path = require('path'),
  cors = require('cors'),
  multer = require('multer'),
  bodyParser = require('body-parser');

// File upload settings  
const PATH = './uploads';

let storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, PATH);
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now())
  }
});

let upload = multer({
  storage: storage
});

// Express settings
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

app.get('/api', function (req, res) {
  res.end('File catcher');
});

// POST File
app.post('/api/upload', upload.single('image'), function (req, res) {
  if (!req.file) {
    console.log("No file is available!");
    return res.send({
      success: false
    });

  } else {
    console.log('File is available!');
    return res.send({
      success: true
    })
  }
});

// Create PORT
const PORT = process.env.PORT || 8080;
const server = app.listen(PORT, () => {
  console.log('Connected to port ' + PORT)
})

// Find 404 and hand over to error handler
app.use((req, res, next) => {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  console.error(err.message);
  if (!err.statusCode) err.statusCode = 500;
  res.status(err.statusCode).send(err.message);
});

Now, while staying in the backend folder run the below command to start the backend server:

nodemon server.js

If everything goes fine then you’ll get the following output:

[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`
Connected to port 8080

Create Angular 8 File Upload Component

In this last step, we are going to create a file upload component in Angular 8 app using Express js API.

Get into the app.component.ts file and include the following code:

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { ToastrService } from 'ngx-toastr';

const URL = 'http://localhost:8080/api/upload';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  public uploader: FileUploader = new FileUploader({
    url: URL,
    itemAlias: 'image'
  });

  constructor(private toastr: ToastrService) { }

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
    this.uploader.onCompleteItem = (item: any, status: any) => {
      console.log('Uploaded File Details:', item);
      this.toastr.success('File successfully uploaded!');
    };
  }

}

Go to app.component.html file and add the given below code:

<div class="wrapper">
  <h2>Angular Image Upload Demo</h2>

  <div class="file-upload">
    <input type="file" name="image" ng2FileSelect [uploader]="uploader" accept="image/x-png,image/gif,image/jpeg" />
    <button type="button" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
      Upload
    </button>
  </div>

</div>

Now, It’s time to start the Angular 8 app to check out the File upload demo in the browser. Run the following command:

ng serve --open

Make sure your NODE server must be running to manage the backend.

When you upload the image from front-end you’ll see your image files are saving inside the backend > uploads folder.

Conclusion

In this Angular 8 tutorial, we barely scratched the surface related to file uploading in a Node application. There are various other methods available on the internet through which you can achieve file uploading task quickly. However, this tutorial is suitable for beginners developers. I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

Angular JS Development Company

If you’re finding AngularJS Development Company for consultation or Development, your search ends here at Data EximIT 

🔗 Click here to know more: AngularJS Development