Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Register Form with AngularJS & Material Design
<body ng-controller="RegisterCtrl" ng-app="myApp">
<div 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="register" novalidate>
<div class="input-field col s6">
<input id="first-name" type="text" class="validate" required>
<label for="first-name">First Name</label>
</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>
<label for="email">Email</label>
</div>
<p class="alert alert-danger" ng-show="form-register.email.$error.email">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" required>
<label for="password">Password</label>
</div>
<p class="alert alert-danger" ng-show="form-register.password.$error.minlength || form.password.$invalid">Your password must be at least 6 characters.</p>
<div class="space-top text-center">
<button ng-disabled="form-register.$invalid" class="waves-effect waves-light btn done">
<i class="material-icons left">done</i> Done
</button>
<button type="button" class="waves-effect waves-light btn cancel">
<i class="material-icons left">clear</i>Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</body>
var myApp = angular.module("myApp", []);
myApp.controller("RegisterCtrl", function ($scope) {
});
<script src="http://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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Simple Register Form with AngularJS & Material Design

Simple Register Form with AngularJS Auth & Material Design

A Pen by Sylvain MARTIN on CodePen.

License.

body {
min-height:100%;
background-color: #263238;
}
.text-center{
text-align: center;
}
.space-bot{
margin-bottom: 35px;
}
.space-top{
margin-top: 35px;
}
/* Title */
h1 {
color: white;
font-family: 'Roboto';
text-transform: uppercase;
font-weight: 900;
font-size: 25px;
text-align: center;
}
/* Sign Up */
.container {
max-width: 400px;
max-height: 100px;
margin-top: 10px;
}
.alert-danger{
text-align: center;
}
.signup-screen {
padding: 20px;
padding-bottom: 40px;
border-radius: 5px;
background-color: #2c3940;
box-shadow: 0 1px 6px rgba(0,0,0,.3);
color: white;
}
.btn{
border-radius: 2px;
}
.cancel{
background-color: #df405a;
}
.done{
background-color: #5CAB7D;
}
.done:hover{
background-color: #6dc793;
}
.done:focus{
background-color: #6dc793;
}
.cancel:hover{
background-color: #f0435f;
}
.cancel:focus{
background-color: #f0435f;
}
.input-group {
width:100%;
}
.input-group .ng-invalid {
border: 2px solid #e74c3c;
border-radius: 3px;
}
/* Error Box */
.alert{
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 2px;
border-color: #e85a71;
background-color: #e85a71;
color: white;
}
.help-block {
font-size: 12px;
color: white
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.