javascript - 如何使用 AngularJs 验证 Django 表单？

Question

我的表格非常简单。可以将其视为具有 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;
      }
    };
  }
])

Answer 1

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