Javascript 如何使用AngularJs验证Django表单？

我的表格很简单。将其视为有一个字段和一个提交按钮。我想要的验证也很简单，如果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.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;
    }
  }
])

注意：因为我以非restful方式同时使用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>

---

按照建议，您需要使用

ng disabled=“searchForm.$invalid”

，因为您已经将name设置为required。

按照建议，您需要使用

ng disabled=“searchForm.$invalid”

，因为您已经将name设置为required。

这也不奇怪。我甚至在我的输入中添加了ng required='required'，但即使这样也不起作用。这也不奇怪。我甚至在我的输入中添加了ng required='required'，但即使这样它也不起作用。

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