AngularJS & Material Design

Simple Register Form with AngularJS & Material Design. This Sample code is forked form this link https://codepen.io/anon/pen/vJvprj

by Yashwanth M

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
<body ng-app="myAppModule">
 <div ng-controller="RegisterCtrl" class="container">
   <div id="signup">
      <div class="signup-screen">
         <div class="space-bot text-center">
            <h1>Sign up</h1>
           <div class="divider"></div>
         </div>
           <form class="form-register" method="post" name="myForm" role="form" data-ng-submit="formSubmit()"><!-- novalidate -->
	            <div class="input-field col s6">
              <input id="first-name" type="text" class="validate" required>
              <label for="first-name">First Name</label>
              <div class="input-material__bar"></div>
            </div>
            <div class="input-field col s6">
              <input id="last-name" type="text" class="validate" required>
              <label for="last-name">Last Name</label>
             </div>
             <div class="input-field col s6">              <input id="email" type="email" name="email" ng-model="email" class="validate" required autocomplete="off">
<!-- autocomplete="off" so that user can't select from previous entered email ids -->
              <label for="email">Email</label>
             </div>
             <p class="alert alert-danger" ng-show="!myForm.email.$error.required && myForm.email.$invalid">Your email is invalid.</p>
             <div class="input-field col s6">
               <input id="password" type="password" name="password" ng-model="password" ng-minlength='6' class="validate" data-ng-required="true">
               <label for="password">Password</label>
             
              <p...

SCSS

/* <head> #shadow-root (Open) means, app using materialize.min.0.97.0.css
Input fields to avoid white color and use background color then use.
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;// border-width: 0 0 1px;
    border-radius: 0;
*/
input[type=text], input[type=password], input[type=email] {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 95% !important; // Changed from 100%
    font-size: 1rem;
    margin: 0 0 10px 11px; // Changed Left: 0 - 11 Rig: 15 - 10
    padding: 0;
    /* box-shadow: none; */
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    transition: all .3s;
}
input[type=text].valid, input[type=text]:focus.valid,
input[type=password].valid, input[type=password]:focus.valid,
input[type=email].valid, input[type=email]:focus.valid {
    border-bottom: 1px solid #4CAF50; // Light Green - #4CAF50
    box-shadow: 0 1px 0 0 #4CAF50;
}
input[type=text].invalid, input[type=text]:focus.invalid,
input[type=password].invalid, input[type=password]:focus.invalid,
input[type=email].invalid, input[type=email]:focus.invalid, {
    border-bottom: 1px solid #F44336;
    box-shadow: 0 1px 0 0 #F44336;
}
.input-field label.active {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    -moz-transform: translateY(-140%);
    -ms-transform: translateY(-140%);
    -o-transform: translateY(-140%);
    transform: translateY(-77%) !important; // -140
}
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]) {
	color: #26a69a;
}
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]) {
	border-bottom: 1px solid #26a69a;
    box-shadow: 0 1px 0 0 #26a69a;
}
input[type=text]:focus:not([readonly]) +...

JavaScript

var myApp = angular.module("myAppModule", []);
myApp.controller("RegisterCtrl", function ($scope) {

});