JSFiddle - React, Tailwind, and code Playground

by jayrmotta

HTML

<div ng-app="test">
    <div ng-controller="TestCtrl">
        <form ng-submit="register()">
            <span>Nome*: </span><input type="text" ng-model="name"/><br/><br/>
            <span>Email*: </span><input type="email" ng-model="email" ng-change="checkEmailAvailability()"/><br/><br/>
            <span>Telefone: </span><input type="text" ng-model="phone"/><br/><br/>
            <span>Estado: </span>
                <select ng-model="state">
                    <option value="">Selecione um estado</option>
                    <option value="abroad" ng-selected="internationalByDefault">Vivo fora do país</option>
                    <option value="{{state.acronym}}" ng-repeat="state in states">{{state.name}}</option>
            
            </select><br/><br/>
            
            <input type="checkbox" ng-model="acceptsNewsletter" ng-checked="acceptNewsletterDefault"/><span>Aceita receber nossa newsletter semanal?</span><br/><br/>
            
            <button type="submit" ng-disabled="!name || !email">Registrar</button>
        </form>
    </div>
</div>

JavaScript

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

app.controller('TestCtrl', function($scope) {
    $scope.acceptNewsletterDefault = true;
    $scope.internationalByDefault = true;
    
    $scope.states = [{
        name : 'Minas Gerais',
        acronym: 'MG'
    },{
        name : 'São Paulo',
        acronym: 'SP'
    }];

    $scope.register = function() {
        alert('Nome: ' + $scope.name + '\n' +
              'Email: ' + $scope.email + '\n' +
              'Telefone: ' + $scope.phone);
    };
    
    $scope.checkEmailAvailability = function() {
        function coinFlip() {
            return (Math.floor(Math.random() * 2) == 0);
        }
        
        if (coinFlip()) {
            alert('Disponível');
        } else {
            alert('Indisponível');
        }
    };
});