JSFiddle - React, Tailwind, and code Playground

by Faisal Pathan

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Validation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
// create angular app
var validationApp = angular.module('validationApp', []);

// create angular controller
validationApp.controller('mainController', function ($scope) {
 $scope.sync =  function () {
var n1 = document.getElementById('txtname1');
var n2 = document.getElementById('txtname2');
n2.value = n1.value;
$scope.user.name2 = n1.value;
}

});


</script>


</head>
<body>


<div ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="row">

<div class="col-sm-6">
<!-- FORM ============ -->
<form name="userForm" ng-submit="submitForm()" novalidate>

<label>Enter name</label>
<input type="text" name="name1" id="txtname1" ng-model="user.name1" class="form-control"  ng-keyup="sync()" required>
<br />

<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name2.$invalid && !userForm.name2.$pristine,'has-success' : userForm.name2.$valid && !userForm.name2.$pristine }">
<label>Name will be copy from the first textbox</label>
<input type="text" name="name2" class="form-control" data-ng-model="user.name2" required id="txtname2">
<p ng-show="userForm.name2.$invalid && !userForm.name2.$pristine" class="help-block">You name is required.</p>
</div>

<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>

</form>
</div>

</div>
<p>If we enter value in the first textbox then that value will be copy in the second textbox.<br/>That time form shuould valid and button should enable as well as in the second textbox...