JSFiddle - React, Tailwind, and code Playground

by willtx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.js"></script>
 

<div ng-app="main" ng-controller="myController as dmpe">
    
    <form name="dmpeForm" novalidate>
        Reset ng-model (blur):&nbsp;
      <input type="text" id="firstName" ng-model="dmpe.form.user.firstName"
             ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
             class="form-control" name="firstName" ng-blur="validateFirstName($event)"
             placeholder="First Name" required />
        
         <div ng-messages="dmpeForm.firstName.$error">
             <div ng-message="required" class="errors">
                    First Name is required
              </div>
         </div>
        <hr />
        <div>
             <p>First Name (model): {{dmpe.form.user.firstName}}</p>
            <p>First Name (form): {{dmpeForm.firstName}}</p>
            <p>Fist Name (form) $modelValue: {{dmpeForm.firstName.$modelValue}}</p>
             <p>Fist Name (form) $viewValue: {{dmpeForm.firstName.$viewValue}}</p>
        </div>  
        <hr />
        <div> User copy: {{userCopy}}
    </form>
    
</div>

CSS

.errors {color: red;}

JavaScript

var appRoot = angular.module('main', ['ngMessages']);

appRoot.controller('myController', ['$scope', function ($scope) {
    var dmpe = this;
    
    $scope.userCopy = {};
    
    dmpe.form = {
        user: {
            firstName: '',
            lastName: '',
            title: '',
            email: '',
            phone: ''
        }
    };
    
    function init(){
        dmpe.form.user.firstName = 'John';
        $scope.userCopy = angular.copy(dmpe.form.user);
    }
    
     $scope.validateFirstName = function(){
         if($scope.dmpeForm.firstName.$dirty)
         {
             //should trigger validater and update form $model/view
         	   dmpe.form.user.firstName = $scope.userCopy.firstName;
         }
    }
     
     init();
    
}]);