JSFiddle - React, Tailwind, and code Playground
by jannis
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.js"></script>
<div ng-app="demo">
<form ng-controller="LoginCtrl" ng-submit="login()" name="loginForm" novalidate>
<input type="email" name="email" placeholder="Email Address" ng-model="loginData.email" required />
<input type="password" name="password" ng-model="loginData.password" required />
<button type="submit">Login</button>
</form>
<form ng-controller="RegisterCtrl" ng-submit="register()" name="registerForm" novalidate>
<input type="email" name="email" placeholder="Email Address" ng-model="registerData.email" required />
<input type="password" name="password" ng-model="registerData.password" required />
<button type="submit">Register</button>
</form>
</div>
JavaScript
var app = angular.module('demo', []);
app.controller('LoginCtrl', function ($scope) {
console.log('LoginCtrl :: Initiated.');
$scope.loginData = {};
// Handle form submission
$scope.login = function () {
var form = $scope.loginForm;
var data = $scope.loginData;
console.log('LoginCtrl :: $scope.login() :: form = ', form, 'data = ', data);
if (form.$valid && form.$dirty && data) {
// submit to server
console.log('LoginCtrl :: $scope.login() :: Form is valid and has been filled. Send to server.');
}
};
});
app.controller('RegisterCtrl', function ($scope) {
console.log('RegisterCtrl :: Initiated.');
$scope.registerData = {};
// Handle form submission
$scope.register = function () {
var form = $scope.registerForm;
var data = $scope.registerData;
console.log('RegisterCtrl :: $scope.register() :: form = ', form, 'data = ', data);
if (form.$valid && form.$dirty && data) {
// submit to server
console.log('RegisterCtrl :: $scope.register() :: Form is valid and has been filled. Send to server.');
}
};
});