如何使用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.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

作為建議在這里 ，你需要使用ng-disabled="searchForm.$invalid"因為你已經設置的名稱必需的。