如何使用AngularJs验证Django表单？

我的表单很简单。把它看作有1个字段和一个提交按钮。我想要的验证也很简单，如果1字段为空，那么提交按钮将被禁用。如果没有，提交按钮将工作。我正在尝试使用AngularJs动态地执行此操作，但不太清楚我缺少的内容。如何使用AngularJs验证Django表单？

虽然我使用的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以非平静的方式组合在一起，我将角标记更改为{$$}，而Django标记为{{}}。

任何帮助表示赞赏！使用此功能

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

来源

2016-02-23 Tahmid Khan Nafee

至于建议here/

<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"，因为您已将名称设置为必需。

来源

2016-02-23 16:40:18

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

如何使用AngularJs验证Django表单？

回答

相关问题