Prev Demo
AngularJS
>
How To Bind The Custom Error Message To The Form Based On Control State In Angularjs?
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <script> var app = angular.module("app", []); app.controller("FormController", ['$scope', function ($scope) { $scope.Main = {}; $scope.Submit = function (PD) { $scope.Main = angular.copy(PD); }; $scope.Reset = function (myForm) { if (myForm) { myForm.$setPristine(); myForm.$setUntouched(); } $scope.PD = angular.copy($scope.Main); }; }]); </script> <form ng-app="app" ng-controller="FormController" name="myForm" novalidate> <p> First name: <input type="text" name="FirstName" ng-model="PD.firstName" required /> <span ng-show="myForm.$submitted"> <label ng-show="myForm.FirstName.$error.required">First name is required !</label> </span> </p> <p> Last name: <input type="text" name="LastName" ng-model="PD.lastName" required /> <span ng-show="myForm.LastName.$touched"> <label ng-show="myForm.LastName.$error.required">Last name is required !</label> </span> </p> <p> Active: <input type="checkbox" name="Active" ng-model="PD.active" required /> <label ng-show="PD.active"> <input type="text" name="ActiveConfirm" ng-model="PD.activeConfirm" required /> </label> <span ng-show="myForm.$submitted"> <label ng-show="myForm.ActiveConfirm.$error.required">Active is required !</label> </span> </p> <input type="button" ng-click="Reset(myForm)" value="Reset" /> <input type="submit" ng-click="Submit(PD)" value="Submit" /> </form> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
