JSFiddle - React, Tailwind, and code Playground

by aslancods

HTML

<div ng-app="">
    
    <div ng-controller="myController">
        
        <form  name="myForm" ng-submit="func_submit()">
            <input type="text" name="fname" ng-model="user.fname" ngModelOptions="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" required    /> <br/>
           <!-- <input type="text" name="lname"  ng-model="user.lname"  ng-model-options="{ updateOn: 'blur' }" required /> <br/>
            <input type="text" name="city"  ng-model="user.city" ng-model-options="{ updateOn: 'blur' }" required />
            <button type="submit">submit</button> -->
            <button ng-click="func_slow()">slow</button>
            <button ng-click="func_fast()">fast</button>
        </form>
        
    </div>
    
</div>

JavaScript

function myController($scope) {
    $scope.user = {
        fname: "",
        lname: "",
        city: ""
    };
    $scope.func_submit = function() {
        alert(" : < submit > :  ");
    };
    $scope.func_slow = function() {
        alert(" : < low > :  ");
    };
    $scope.func_fast = function() {
        alert(" : < fast > :  ");
    };
    var bname = $scope.user.fname;
    $scope.$watch('[bname , user.lname, user.city ]',function(){
        if( $scope.myForm.$valid && $scope.myForm.$dirty ) {
            console.log( ":)" );
        }
    },true);
};