JSFiddle - React, Tailwind, and code Playground

by gangadharjannu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as MC" class="container">
  <div class="col-md-6 col-md-offset-3">

    <!-- PAGE TITLE -->
    <div class="page-header">
      <h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
    </div>

    <!-- SHOW ERROR/SUCCESS MESSAGES -->
    <div id="messages" class="well" ng-show="message">{{ message }}</div>

    <!-- FORM -->
    <form ng-submit="processForm()">
      <!-- NAME -->
      <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }">
        <label>Name</label>
        <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
        <span class="help-block" ng-show="errorName">{{ errorName }}</span>
      </div>

      <!-- SUPERHERO NAME -->
      <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }">
        <label>Superhero Alias</label>
        <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias">
        <span class="help-block" ng-show="errorSuperhero">{{ errorSuperhero }}</span>
      </div>

      <!-- SUBMIT BUTTON -->
      <button type="submit" class="btn btn-success btn-lg btn-block">
        <span class="glyphicon glyphicon-flash"></span> Submit!
      </button>
    </form>

    <!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED -->
    <pre>
		{{ formData }}
	</pre>

  </div>
</div>

JavaScript

angular.module('myApp', []);
angular.module('myApp').controller('MyController', MyController);
MyController.$inject = ['$http'];

function MyController($http) {
  var MC = this;
	
}