JSFiddle - React, Tailwind, and code Playground

by justbn

HTML

<div ng-app="app" ng-controller='AppCtrl'>

    
<form name="signup">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" 
        placeholder="Give My Your Email"  
        ng-model="emailAddress" value="{{ emailAddress }}"
    />
    
    <p>Email is Currently : {{ currentEmail }}</p>

</form>
    
</div>

CSS

input.ng-invalid {
    background-color: red;
}

JavaScript

var app = angular.module('app', []);

app.controller('AppCtrl', [ '$scope', function($scope) {
    $scope.emailAddress = null;
    $scope.currentEmail = 'No Email Yet';
    
    $scope.$watch('emailAddress', function() {
        console.log('Email is currently: ' + $scope.emailAddress);
        
        if( $scope.emailAddress === null ) {
            console.log('Email was null so skipping.');
            return;
        }
        $scope.currentEmail = $scope.emailAddress;
    });
}]);