javascript - Allow user to click a button only when email is valid -

i using angularjs on web application. trying perform quite simple. have email input , button. want button's function enabled once valid email entered. i've tried:

<div>     <p class="required">*</p>     <input type="email" ng-model="email" placeholder="enter email" required> </div>  <div class="btn-container" ng-class={true : 'validemail', false : 'invalidemail'}[email]>     <div class="btn-go" ng-click="finduser();">go!</div> </div> 

be default, i'd button blue. once valid email entered, button turns green. hence the:

ng-class={true : 'validemail', false : 'invalidemail'}[email] 

here are:

 ng-class="myform.input.$valid ? 'valid' : 'invalid'"  

ng-class checks whether input valid or invalid , returns 2 corresponding classes .valid , .invalid.

while can apply styles css:

.valid {   background: green; }  .invalid {   background: blue; } 

the html should this:

<form name="myform" ng-controller="examplecontroller">   <label>email:     <input type="email" name="input" ng-model="email.text" required>   </label>   <div role="alert">     <span class="error" ng-show="myform.input.$error.required">         required!</span>     <span class="error" ng-show="myform.input.$error.email">         not valid email!</span>   </div>   <tt>text = {{email.text}}</tt>   <br/>   <button ng-class="myform.input.$valid ? 'valid' : 'invalid'">submit</button> </form> 

in controller:

var app = angular.module('plunker', []);  app.controller('examplecontroller', ['$scope', function($scope) {   $scope.email = {     text: 'me@example.com'   }; }]); 

also can use ng-disabled="myform.input.$invalid" on button make unusable if input invalid.

see example.

resources: input[email], the many ways use ngclass, ngdisabled.