如何使用 AngularJs 验证 Django 表单？答案

【问题标题】：How to validate a Django form using AngularJs?如何使用 AngularJs 验证 Django 表单？
【发布时间】：2016-02-23 15:34:08
【问题描述】：

我的表格很简单。将其视为具有 1 个字段和一个提交按钮。我想要的验证也很简单，如果 1 字段为空，那么提交按钮将被禁用。如果没有，提交按钮将起作用。我正在尝试使用 AngularJs 动态执行此操作，但不太确定我缺少什么。

虽然我使用的是 Django 表单，但我的表单在 Html 中呈现如下：

<div ng-app="myApp" ng-controller="searchController">
    <form method='POST' action='' class="form-with-blue-labels" name="searchForm">
        {% csrf_token %}
        <input class="textinput textInput form-control" id="id_professor_name" maxlength="255" name="professor_name" placeholder="Search for a professor" required="required" type="text">
        <input ng-disabled="disabled_bool" type="submit" class="btn btn-primary" value="Search" />
    </form>
</div>

我的 Angular 文件看起来像这样：

angular.module('myApp', [])

.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{$');
  $interpolateProvider.endSymbol('$}');
})

.controller('searchController', [
  '$scope', function($scope) {
    var search_target = angular.element('#id_professor_name');
    if (search_target == ''){
      $scope.disabled_bool = true;
    }
  }
])

注意：由于我以一种不平静的方式一起使用 Django 和 Angular，我将 Angular 标签更改为 {$$}，而 Django 标签是 {{}}。

感谢任何帮助！

编辑

我现在已经尝试过了，但仍然无法正常工作：/

<div ng-app="myApp" ng-controller="searchController">
    <form method='POST' action='' class="form-with-blue-labels" name="searchForm">
        {% csrf_token %}
        <input ng-change="change()" class="textinput textInput form-control" id="id_professor_name" maxlength="255" name="professor_name" placeholder="Search for a professor" required="required" type="text">
        <input ng-disabled="disable_button" type="submit" class="btn btn-primary" value="Search" />
    </form>
</div>

使用此功能

angular.module('myApp', [])

.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{$');
  $interpolateProvider.endSymbol('$}');
})

.controller('searchController', [
  '$scope', function($scope){
    $scope.change = function(){
      if (angular.element('#id_professor_name').length == 0) {
        $scope.disable_button = true;
      }
      else {
        $scope.disable_button = false;
      }
    };
  }
])

【问题讨论】：

标签： javascript angularjs django django-forms

【解决方案1】：

按照here的建议，您需要使用ng-disabled="searchForm.$invalid"，因为您已经将名称设置为必需。

【讨论】：

这也不奇怪。我什至在我的输入中添加了 ng-required='required'，但即便如此它也不起作用。