Angular Form Autofill Handling

by Oisin Conolly

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.2/css/foundation.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="row">

<div class="small-6 small-centered columns" ng-controller="myFormCtrl">
  <h1>Help Request Form</h1>
    <small>*Required</small>
  </p>

  <form name="helpRequestForm" autocomplete="off" novalidate ng-hide="sent" auto-fill-sync>
    <div class="row">
      <div class="large-12 columns">
        <label>Subject <sup>*</sup></label>
        <input type="text" placeholder="Subject" required name="subject" ng-model="request.subject"  />
        <small ng-show="helpRequestForm.subject.$invalid && !helpRequestForm.subject.$pristine" class="error">Please enter a subject</small>
      </div>
    </div>
    <div class="row">
      <div class="small-6 columns">
        <label>Username<sup>*</sup></label>
        <input type="text" placeholder="Username" autocomplete="off" required name="username" ng-model="request.username"  autofillable />
        <small ng-show="helpRequestForm.username.$invalid && !helpRequestForm.username.$pristine && !helpRequestForm.$pristine" class="error">Please enter your username</small>
      </div>
      <div class="small-6 columns">
        <label>Password<sup>*</sup></label>
        <input type="password" placeholder="Password" autocomplete="off" required name="password" ng-model="request.password"  autofillable />
        <small ng-show="helpRequestForm.password.$invalid && !helpRequestForm.password.$pristine" class="error">Please enter your password</small>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <label>Details<sup>*</sup></label>
        <textarea rows="50" placeholder="Please give as much detail about your problem..." required name="details" ng-model="request.details" >
        </textarea>
        <small ng-show="helpRequestForm.details.$invalid && !helpRequestForm.details.$pristine" class="error">Please enter the...

CSS

small.error{
    margin-top:-1.5rem;
}

JavaScript

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

app.controller('myFormCtrl', ['$scope', function($scope){
    //form controller
	$scope.sent = false;
	$scope.error = false;
	$scope.sendBtnText = "Send Request";
    	$scope.sendRequest = function(){
		//validate
		//send request
		$scope.sendBtnText = "Sending...";
		$scope.sent = false;
		$scope.error = false;
            
        //http sending code here...
	};
}]);



/*-----directives-----*/
app.directive('autofillable', ['$timeout', function ($timeout) {
    return {
        require: 'ngModel',
        scope: {},
        link: function (scope, elem, attrs, ctrl) {
            scope.check = function(){
                var val = elem[0].value;
                if(ctrl.$viewValue !== val){
                    //var isPristine = false;
                    //if(ctrl.$pristine) isPristine = true;
                    ctrl.$setViewValue(val);
                    //if the form control was originally pristine, set it back to pristine
                   	//ctrl.$pristine = isPristine;
                }
                $timeout(scope.check, 300);
            };
            scope.check();
        }
    }
}]);




/*----------Simulate autocomplete input---------*/
$(document).on('click', '#autofillMe', function(){
    $("form [name='username']").val('johnDoe');
    $("form [name='password']").val('jdPass');
});