Django自定义password_reset_confirm.html集成AngularJS无法提交

嘿，我来帮你排查这个提交没反应的问题——大概率是AngularJS和Django的表单机制冲突导致的，咱们一步步来解决：

1. 先搞定Django的CSRF Token适配 #

Django的表单必须携带CSRF令牌才能提交，而Angular需要正确识别这个令牌。你可以在模板里添加这段Angular配置：

<script>
angular.module('app', [])
.run(function($http) {
    // 从Django的表单隐藏域中获取CSRF令牌，设置到Angular请求头
    var csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    $http.defaults.headers.common['X-CSRFToken'] = csrftoken;
});
</script>

同时别忘了在form标签里加上Django的CSRF令牌标签：

<form id="reset-form" method="post">
    {% csrf_token %}
    <!-- 你的密码输入字段 -->
</form>

2. 解决Angular拦截原生表单提交的问题 #

Angular默认会拦截表单的原生提交行为，这是导致点击按钮没动静的常见原因。你有两种选择：

• 允许原生提交：给form标签加上ng-submit="return true"，让Angular不拦截默认提交逻辑：

  <form id="reset-form" method="post" ng-submit="return true">
      <!-- 表单内容 -->
      <button type="submit" class="btn btn-primary">{% trans "Reset Password" %}</button>
  </form>
  

• 用Angular处理提交逻辑：如果想通过AJAX提交，在控制器里绑定提交函数：

  angular.module('app').controller('Ctrl', function($scope, $http) {
      $scope.submitReset = function() {
          $http.post(window.location.href, {
              new_password1: $scope.newPassword1,
              new_password2: $scope.newPassword2
          })
          .then(function(res) {
              // 提交成功后的逻辑，比如跳转提示页
              window.location.href = '/password-reset-complete/';
          })
          .catch(function(err) {
              // 处理错误，比如显示密码不匹配提示
              $scope.error = err.data;
          });
      };
  });
  

  对应的表单要改成：

  <form ng-submit="submitReset()">
      {% csrf_token %}
      <input type="password" ng-model="newPassword1" name="new_password1" required>
      <input type="password" ng-model="newPassword2" name="new_password2" required>
      <button type="submit">{% trans "Reset Password" %}</button>
  </form>
  

3. 检查表单字段的name属性 #

Django的密码重置表单要求字段名必须是new_password1和new_password2，不管你用原生提交还是Angular绑定，都要确保输入框的name属性和这个一致，否则后端接收不到数据，也会看起来没反应。

4. 查看浏览器控制台的报错 #

打开浏览器开发者工具（F12）的Console标签，看看有没有Angular的报错——比如控制器找不到、模型绑定错误、CSRF令牌获取失败等，这些报错会直接告诉你问题出在哪，针对性修复就行。

内容的提问来源于stack exchange，提问作者Username