How to reset a registration form in angular js - angularjs

Question

I'm facing one issue with a registration form.
If I log in and browser offers me to save username/password, they are both displayed on the registration form.
I tried to reset the form, I tried to set user details to null, but it didn't work.
As username and password are predefined, repeat password error is present.
here is a snap
Register Controller
...
registerController.$inject = ['$location', 'UsersService', '$timeout'];
function registerController($location, UsersService, $timeout) {
var vm = this;
vm.master = {};
vm.isValid = false;
vm.error = false;
vm.errorMessage = "";
vm.user = {
username : '',
password : '',
email: ''
}
formReset();
// function to submit the form after all validation has occurred
vm.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
console.info('form valid');
vm.isValid = true;
}
if(vm.isValid === true){
signup();
}
else{
vm.error = true;
vm.errorMessage = "All fields are required";
}
};
function signup() {
// initial values
vm.error = false;
vm.success = false;
var username = vm.user.username;
var password = vm.user.password;
// call register from service
UsersService.register(username, password)
// handle success
.then(function () {
vm.success = true;
vm.successMessage = "Registrations successful.You'll get confirmation email soon and you can proceed with login";
$timeout(function() {
$location.path('/login');
}, 5000);
})
// Catch error
.catch(function (fallback) {
vm.error = true;
vm.errorMessage = fallback;
});
};
function formReset(form){
if(form === '' || form === undefined){
form = vm.form;
}
if(form){
form.$setPristine();
form.$setUntouched();
form.$setValidity();
}
vm.contact = angular.copy(vm.master);
}
}
jade template
form.form-horizontal.col-md-12(name="form" role="form", data-ng-submit="ctrl.submitForm(form.$valid)", method="post" novalidate, autocomplete="off")
.form-group(show-errors)
label.control-label.col-xs-3 Username
span.icon-req.glyphicon.glyphicon-asterisk
.col-xs-9
input.form-control(type="text", name="username", placeholder="Enter Username", data-ng-model="ctrl.user.username", data-user-id="{{ctrl.user._id}}", data-ng-minlength="3", required="required" auth-username)
span.help-inline.error(data-ng-show = "form.$dirty && form.username.$error.required") Username required
span.help-inline.error(data-ng-show = "form.$dirty && form.username.$error.minlength") Username too short
span.help-inline.error(data-ng-show = "ctrl.form.username.$touched && ctrl.form.username.$error.usernameExists") Username already taken
.form-group(show-errors)
label.control-label.col-xs-3 Password
span.icon-req.glyphicon.glyphicon-asterisk
.col-xs-9
input.form-control(type="password", name="password", placeholder="Password", data-ng-model="ctrl.user.password", data-ng-minlength="6",ng-maxlength="16", required="required")
span.help-inline.error(data-ng-show = "form.$dirty && form.password.$error.required") Password required
span.help-inline.error(data-ng-show = "form.$dirty && form.password.$error.minlength || form.password.$error.maxlength") Password must be 6-16 character long
.form-group(show-errors)
label.control-label.col-xs-3 Repeat password
span.icon-req.glyphicon.glyphicon-asterisk
.col-xs-9
input.form-control(type="password", name="repeatPassword", placeholder="Repeat Password", data-ng-model="ctrl.user.repeatPassword", data-ng-minlength="4",required="required", equal-to="ctrl.user.password")
span.help-inline.error(data-ng-show = "form.$dirty && form.repeatPassword.$error.equalTo") Password must be equal
....
button.btn.btn-default(type="submit") Submit
a(href='/')
button.btn.btn-primary(type="button") Cancel
I'm pretty much new to mean stack development, and I'm sure I miss something out.I appreciate your help. Thanks
PS: the code posted is a simplified and not optimized one

Answer 1

So first I try with the HTML autocomplete Attribute. But it was not working on chrome. After that I found this post Chrome Browser Ignoring AutoComplete=Off.
One of the solution to disable autocomplete is to set the input readonly and add a bit of js on the onfocus Attribute.
onfocus="this.removeAttribute('readonly')
I test this solution with an angular form and it's working.
See the original fiddle by fizzix