Angel M. Angel M. - 1 year ago 114
AngularJS Question

How to reset a registration form in angular js

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
enter image description here

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: ''

// 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) {'form valid');
vm.isValid = true;
if(vm.isValid === true){
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() {
}, 5000);
// Catch error
.catch(function (fallback) {
vm.error = true;
vm.errorMessage = fallback;

function formReset(form){
if(form === '' || form === undefined){
form = vm.form;

} = 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")
label.control-label.col-xs-3 Username

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) = "form.$dirty && form.username.$error.required") Username required = "form.$dirty && form.username.$error.minlength") Username too short = "ctrl.form.username.$touched && ctrl.form.username.$error.usernameExists") Username already taken

label.control-label.col-xs-3 Password

input.form-control(type="password", name="password", placeholder="Password", data-ng-model="ctrl.user.password", data-ng-minlength="6",ng-maxlength="16", required="required") = "form.$dirty && form.password.$error.required") Password required = "form.$dirty && form.password.$error.minlength || form.password.$error.maxlength") Password must be 6-16 character long

label.control-label.col-xs-3 Repeat password

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") = "form.$dirty && form.repeatPassword.$error.equalTo") Password must be equal


button.btn.btn-default(type="submit") Submit

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 Source

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.


I test this solution with an angular form and it's working. See the original fiddle by fizzix

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download