JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app" ng-controller="formCtrl">
<form name="registerForm">
<div class="header">
<h2>Create your account</h2>
</div>
<div class="form-group">
<div class="title">First Name</div>
<input type="text" name="firstName" ng-required class="form-control" ng-class="{empty:form.firstName.length==0}" ng-model="form.firstName" required></input>
</div>
<div class="form-group">
<div class="title">Last Name</div>
<input type="text" name="lastName" ng-required class="form-control" ng-class="{empty:form.lastName.length==0}" ng-model="form.lastName" required></input>
</div>
<div class="form-group">
<div class="title">Email</div>
<input type="email" name="email" ng-required class="form-control" ng-class="{empty:form.email.length==0}" ng-model="form.email" required></input>
</div>
<div class="form-group">
<div class="title">Password</div>
<input type="password" name="password" class="form-control" ng-class="{empty:form.password.length==0}" ng-model="form.password" required></input>
<input type="password" name="passwordBis" class="form-control" ng-class="{empty:form.passwordBis.length==0}" ng-model="form.passwordBis" required></input>
</div>
<div ng-if="form.password != form.passwordBis" class="error">Passwords doesn't match.</div>
<div class="form-group">
<button class="btn btn-success" ng-click="register()" ng-disabled="registerForm.$invalid || form.password != form.passwordBis">Register</button><br/>
</div>
</form>
</div>
SCSS
form {
min-width: 320px;
max-width: 550px;
margin: 50px auto 0 auto;
.form-group {
margin: 10px 0;
}
input {
&.empty {
border-color: red;
}
&[type="email"] {
&.ng-invalid, {
border-color: red;
}
}
}
.error {
color: #e4442c;
background-color: #f2dede;
padding-left: 5px;
}
}
JavaScript
var app = angular.module("app", []);
app.controller("formCtrl", function($scope) {
$scope.form = {
firstName: "",
lastName: "",
email: "",
password: "",
passwordBis: ""
};
});