Wie man ein Registrierungsformular in eckigen js zurücksetzen

Question

Ich stehe vor einem Problem mit einem Anmeldeformular. Wenn ich mich anmelde und der Browser mir anbietet, den Benutzernamen/das Passwort zu speichern, werden beide auf dem Anmeldeformular angezeigt. Ich habe versucht, das Formular zurückzusetzen, ich habe versucht, Benutzerdetails auf null festzulegen, aber es hat nicht funktioniert. Da Benutzername und Passwort vordefiniert sind, ist ein Wiederholungs-Passwortfehler vorhanden.

hier ist ein Kinderspiel

Registerregler

... 
    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 Vorlage

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 

ich ziemlich bin neu Stackentwicklung zu verstehen, und ich Ich bin mir sicher, dass ich etwas vermisse. Ich weiß es zu schätzen unsere Hilfe. Dank

PS: der Code geschrieben ist eine vereinfachte und nicht eine optimierte

Answer 1

Also zuerst versuche ich mit dem HTML-Attribut zur automatischen Vervollständigung. Aber es funktionierte nicht auf Chrom. Danach fand ich diesen Beitrag Chrome Browser Ignoring AutoComplete=Off.

Eine der Lösungen zum Deaktivieren der automatischen Vervollständigung besteht darin, die Eingabe readonly zu setzen und ein wenig js im onfocus-Attribut hinzuzufügen.

onfocus="this.removeAttribute('readonly') 

Ich teste diese Lösung mit einer eckigen Form und es funktioniert. Die Original-fiddle von fizzix