2016-08-05 4 views
0

登録フォームに1つ問題があります。 ログインしてブラウザでユーザー名とパスワードを保存することができれば、両方とも登録フォームに表示されます。 フォームをリセットしようとしましたが、ユーザーの詳細をnullに設定しようとしましたが、動作しませんでした。 ユーザー名とパスワードが事前定義されているため、リピートパスワードエラーが存在します。ここ角度jsで登録フォームをリセットするには

はスナップ enter image description here

登録コントローラー

... 
    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); 
     } 

    } 

ヒスイのテンプレート

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 

である私はかなり新しいスタックの開発を意味するんだ、と私は」私は何かが恋しいと思います。私たちの助け。おかげ

PS:投稿コードは、私はHTMLオートコンプリート属性を試みる簡略化し、したがって、最初の1

答えて

1

を最適化されていません。しかし、それはクロムには作用していなかった。その後、私はこの投稿を見つけたChrome Browser Ignoring AutoComplete=Off

オートコンプリートを無効にする方法の1つは、入力読み取り専用を設定し、onfocus属性にjsビットを追加することです。

onfocus="this.removeAttribute('readonly') 

私はこのソリューションを角型でテストしています。 オリジナルを見るfiddleによってfizzix

+0

私はちょうど参考に、これはクロームのためだけでなく、Firefoxのためだけでなく、ユーザー名にreadonly attrを追加するのに十分であるようです) –