Question

我正面临一个注册表格的问题。如果我登录并且浏览器提供我保存用户名/密码，它们都会显示在注册表单上。我试图重置表单，我试图将用户详细信息设置为null，但它不起作用。由于预定义了用户名和密码，因此存在重复密码错误。

这是一个快照

注册控制器

...
  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：发布的代码是简化而未优化的代码

Answer 1

首先，我尝试使用HTML自动完成属性。但它没有在chrome上工作。之后我发现了这篇文章Chrome Browser Ignoring AutoComplete=Off。

禁用自动完成的一个解决方案是设置readonly输入并在onfocus属性上添加一些js。

onfocus="this.removeAttribute('readonly')

我用角形测试这个解决方案，它正在工作。通过fiddle

查看原始fizzix

如何在角度js中重置注册表单

1 个答案: