JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.4.8/angular-messages.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<div ng-controller="testCtrl">
{{test}}
<form novalidate name="loginForm" ng-submit="loginForm.$valid && loginFn()">
  <div class="form-group" ng-class="loginForm.username.$invalid && loginForm.$submitted?'has-error':''">
  <label for=""></label>
  <input type="text" ng-model="login.username" name="username" class="form-control" required>
  <div ng-show="loginForm.username.$invalid && loginForm.$submitted" class="error">
    <div ng-messages>
      <div ng-message="required">Username is required</div>
    </div>
  </div>
  </div>
  <div class="form-group"  ng-class="loginForm.password.$invalid  && loginForm.$submitted?'has-error':''">
  <label for=""></label>
  <input type="password" ng-model="login.password" class="form-control" name="password" required>
  </div>
  <div class="form-group">
    <button class="btn btn-primary pull-right" type="submit">
    Login
    </button>
  </div>
</form>
</div>

CSS

.error{
  color:red;
}

JavaScript

var app = angular.module('testApp',[]);
app.controller('testCtrl', function($scope){
$scope.login = {username:'',password:''}
$scope.loginFn = function(){
alert("clicked");
}

})