JSFiddle - React, Tailwind, and code Playground

by Michele Marcucci

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div class="bodycontainer col-lg-9" ng-app="MyForm" ng-controller="StudentControl as stdCtrl">
  <form name="logForm" class="col-lg-12" novalidate ng-submit="stdCtrl.StudentCtrl()">

    <input type="hidden" id="studentid" name="studentid" ng-model="stdCtrl.stdId" class="form-control" />

    <div class="form-group col-lg-6">
      <label>Firstname</label>
      <input type="text" id="first" name="fname" ng-required="true" ng-model="stdCtrl.fName" class="form-control" autofocus placeholder="FirstName">
      <span class="help-block" ng-show="logForm.fname.$invalid && !logForm.fname.$pristine">FirstName Required</span>
    </div>
    <div class="form-group col-lg-6">
      <input type="submit" id="btn"  name="Nextpage" class="form-control" value="Update" />
    </div>
    <div id="form-group" class="col-lg-6">
      <input type="submit" name="Cancel" id="btn1" ng-click="CancelForm()" ng-disabled="!logForm.$valid" class="form-control" value="Cancel" />
    </div>
    <p>
    The name: {{stdCtrl.fName}}
    </p>
  </form>
</div>

JavaScript

var app = angular.module("MyForm", []);
app.controller('StudentControl', ['$scope', '$http', function($scope, $http) {
  this.StudentCtrl = function() {
    console.log($scope.stdCtrl.fName);
  }
}]);