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

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

如何使用AngularJs验证Django表单？

1 个答案: