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-repeat="x in fType" 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">{{x.firstname}}</input>
      <span class="help-block" ng-show="logForm.fname.$invalid && !logForm.fname.$pristine">FirstName Required</span>

    </div>


    <div class="form-group col-lg-6">
      <label>Lastname</label>
      <input type="text" name="lname" ng-required="true" ng-model="stdCtrl.lName" class="form-control" placeholder="LastName">{{x.lastname}}</input>
      <span class="help-block" ng-show="logForm.lname.$invalid && !logForm.lname.$pristine">LastName Required</span>
    </div>


    <div class="form-group col-lg-12">
      <label>Gender:&nbsp&nbsp&nbsp</label>
      <input type="radio" name="gender" ng-model="stdCtrl.gender" value="male" required>Male{{x.gender}}</input>
      <input type="radio" name="gender" ng-model="stdCtrl.gender" value="female" required>Female{{x.gender}}</input>
      <span class="help-block" ng-show="logForm.gender.$invalid && !logForm.gender.$pristine">Gender Required</span>
    </div>


    <div class="form-group col-lg-6">
      <label>Email</label>
      <input type="email" name="email" ng-required="true" ng-model="stdCtrl.Email" class="form-control" placeholder="Your Email">{{x.email}}</input>
      <span class="help-block" ng-show="logForm.email.$invalid && !logForm.email.$pristine">Email Required</span>
    </div>


    <div class="form-group col-lg-6">
      <label>Fathername</label>
      <input...

JavaScript

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