如何使用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表單？

回答

相關問題