Angular Material Input
home
Run
screen_rotation
fullscreen
cloud_download
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial', 'ngMessages']) .controller('MyController', function ($scope, $mdDialog) { //controller code goes here... }); </script> <style type="text/css"> .inputdemoErrors .inputErrorsApp { min-height: 48px; } .inputdemoErrors md-input-container > p { font-size: 0.8em; text-align: left; width: 100%; } </style> </head> <body ng-app="myApp"> <div ng-controller="MyController" ng-cloak="" > <md-content layout-padding> <form name="userForm"> <md-input-container class="md-block" flex="50"> <label>Name</label> <input md-maxlength="15" required md-no-asterisk name="name" ng-model="name"> <div ng-messages="userForm.name.$error"> <div ng-message="required">This is required.</div> <div ng-message="md-maxlength">The name must be less than 20 characters long.</div> </div> </md-input-container> <md-input-container class="md-block" flex="50"> <label>Email</label> <input required name="email" ng-model="email"> <div ng-messages="userForm.email.$error"> <div ng-message="required">This is required.</div> </div> </md-input-container> <div> <md-button type="submit">Submit</md-button> </div> <br> <p class="md-block" style="font-size:.8em; width: 100%; text-align: center;clear:both;"> Make sure to include <a href="https://docs.angularjs.org/api/ngMessages" target="_blank">ngMessages</a> module when using ng-message markup. </p> </form> </md-content> </div> </body> </html>
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial', 'ngMessages']) .controller('MyController', function ($scope, $mdDialog) { //controller code goes here... }); </script> <style type="text/css"> .inputdemoErrors .inputErrorsApp { min-height: 48px; } .inputdemoErrors md-input-container > p { font-size: 0.8em; text-align: left; width: 100%; } </style> </head> <body ng-app="myApp"> <div ng-controller="MyController" ng-cloak="" > <md-content layout-padding> <form name="userForm"> <md-input-container class="md-block" flex="50"> <label>Name</label> <input md-maxlength="15" required md-no-asterisk name="name" ng-model="name"> <div ng-messages="userForm.name.$error"> <div ng-message="required">This is required.</div> <div ng-message="md-maxlength">The name must be less than 20 characters long.</div> </div> </md-input-container> <md-input-container class="md-block" flex="50"> <label>Email</label> <input required name="email" ng-model="email"> <div ng-messages="userForm.email.$error"> <div ng-message="required">This is required.</div> </div> </md-input-container> <div> <md-button type="submit">Submit</md-button> </div> <br> <p class="md-block" style="font-size:.8em; width: 100%; text-align: center;clear:both;"> Make sure to include <a href="https://docs.angularjs.org/api/ngMessages" target="_blank">ngMessages</a> module when using ng-message markup. </p> </form> </md-content> </div> </body> </html>
Copyrights@tutorialsplane.com