Item: Errors
Rating: 3.4
Author: 1kohei1

0 Downloads
11 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Errors</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-controller="AppCtrl" layout="column" class="inputdemoErrors" ng-app="MyApp">

  <md-toolbar class="md-primary">
    <h1 class="md-toolbar-tools">
      Top Secret Project
    </h1>
  </md-toolbar>

  <!-- <md-content layout-padding=""> -->
    <form name="projectForm">
      <md-input-container>
        <label>Description</label>
        <input md-maxlength="30" required="" name="description" ng-model="project.description">
        <div ng-messages="projectForm.description.$error">
          <div ng-message="required">This is required.</div>
          <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
        </div>
      </md-input-container>
  
      <md-input-container>
        <label>Client Name</label>
        <input required="" name="clientName" ng-model="project.clientName">
        <div ng-messages="projectForm.clientName.$error">
          <div ng-message="required">This is required.</div>
        </div>
      </md-input-container>
  
      <md-input-container>
        <label>Hourly Rate (USD)</label>
        <input required="" type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999">
        <div ng-messages="projectForm.rate.$error">
          <div ng-message="required">You've got to charge something! You can't just <b>give away</b> a Missile Defense System.</div>
          <div ng-message="min">You should charge at least $800 an hour. This job is a big deal... if you mess up, everyone dies!</div>
          <div ng-message="max">$5,000 an hour? That's a little ridiculous. I doubt event Bill Clinton could afford that.</div>
        </div>
      </md-input-container>
    </form>
  <!-- </md-content> -->
  
    <div layout-padding>
      <md-input-container flex>
        <label>Sample</label>
        <input type="text" name="sample" ng-model="sample" required/>
        <div ng-messages="{'required': true}">
          <div ng-message="required">Please enter the External Link</div>
        </div>
        {{ sampleForm.sample.$error }}
      </md-input-container>
    </div>

</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/1kohei1/errors-bdMMpg */
.inputdemoErrors .inputErrorsApp {
  min-height: 48px; }


/*Downloaded from https://www.codeseek.co/1kohei1/errors-bdMMpg */
angular.module('MyApp')

.controller('AppCtrl', function($scope) {
  $scope.project = {
    description: 'Nuclear Missile Defense System',
    rate: 500
  };
});

Comments

More from 1kohei1

Errors

In this example below you will see how to do a Errors with some HTML / CSS and Javascript

Technologies

Comments

More from 1kohei1

SVG.js playground

RxJS playground

RxJS drag capture drag complete

Observable connect

You Might Also Like

A Pen by francesco agati

Directive

A Pen by Samantha

Local Weather

A Pen by Weini Zhou

Wikipedia Viewer

Align inline-blocks with vertical-align

iOS Calculator with VueJS