角形式驗證$無效不工作

我試圖禁用提交按鈕，當字段爲空。但它不工作。不知道爲什麼它不工作。看過很多博客，但無法弄清楚這個問題是什麼。

<form name="createForm"> 
    <div class="form-group col-md-6"> 
     <label for="createName">Student</label> 
     <select class="form-control" name="student" id="createName" ng- 
     model="createStudent.studentId" ng-options="item.name for item in 
     allStudent" required> 
     <option value="" selected disabled>Select</option> 
    </select> 
    </div> 
    <div class="form-group col-md-6"> 
    <label for="createClass">Class</label> 
    <select class="form-control" name="class" id="createClass" ng- 
    model="createStudent.classId" ng-options="item.number for item in 
    allClass" required> 
     <option value="" selected disabled>Select</option> 
    </select> 
    </div> 
</div> 
    <div class="form-group col-md-6 text-md-center"> 
    <label for="createCategory">Type of Category</label> 
    <select class="form-control" name="category" id="createCategory" 
    ng-model="createStudent.type" ng-options="item.category_type for 
     item in allcategoriestypes" required> 
     <option value="" selected disabled>Select</option> 
    </select> 
    </div> 
</div> 
<div class="row align-items-end justify-content-center"> 
    <div class="form-group col-md-6 text-md-center"> 
    <label for="createTeacherName">Teacher Name</label> 
    <input type="text" class="form-control" name="teacher" 
    id="createTeacherName" ng-model="createStudent.name" 
    placeholder="Enter Teacher Name" required> 
    </div> 
</div> 
</div> 
<div class="text-center pt-1"> 
<button type="submit" class="btn btn-info px-5" ng- 
    click="create(createStudent)" ng- 
    disabled="createForm.$invalid">Save</button> 
</div> 
</form>

來源

2017-07-28 Nagesh

請在下面的回答中檢查plunker – Deepa

我檢查過，在我的項目中不工作。 – Nagesh

這是什麼問題？ – Deepa

請找到你的代碼工作plunker：

http://plnkr.co/edit/H1LOahFNWRXYHWTVmrcW?p=preview

<form name="createForm"> 
    <div class="form-group col-md-6"> 
     <label for="createName">Student</label> 
     <select class="form-control" name="student" id="createName" ng- 
     model="createStudent.studentId" required> 
     <option value="studentValue">Student Name</option> 
    </select> 
    </div><br/> 
    <div class="form-group col-md-6"> 
    <label for="createClass">Class</label> 
    <select class="form-control" name="class" id="createClass" ng- 
    model="createStudent.classId" required> 
     <option value="classValue">Class</option> 
    </select> 
    </div><br/> 
    <div class="form-group col-md-6 text-md-center"> 
    <label for="createCategory">Type of Category</label> 
    <select class="form-control" name="category" id="createCategory" 
    ng-model="createStudent.type" required> 
     <option value="typeValue">Category</option> 
    </select> 
    </div><br/> 
<div class="row align-items-end justify-content-center"> 
    <div class="form-group col-md-6 text-md-center"> 
    <label for="createTeacherName">Teacher Name</label> 
    <input type="text" class="form-control" name="teacher" 
    id="createTeacherName" ng-model="createStudent.name" 
    placeholder="Enter Teacher Name" required> 
    </div> 
</div><br/> 
<div class="text-center pt-1"> 
<label>Value returned for $invalid :: {{createForm.$invalid}}</label><br/><br/> 
<button type="submit" class="btn btn-info px-5" ng-click="create(createStudent)" ng-disabled="createForm.$invalid">Save</button> 
</div> 
</form>

確保所有的標籤都完全封閉，不關你的字段是空的。

來源

2017-07-28 05:32:11 Deepa

它工作正常，當字段爲空時禁用提交按鈕。

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
<form name="createForm"> 
 
    <div class="form-group col-md-6"> 
 
     <label for="createName">Student</label> 
 
     <select class="form-control" name="student" id="createName" ng- 
 
     model="createStudent.studentId" ng-options="item.name for item in 
 
     allStudent" required> 
 
     <option value="" selected disabled>Select</option> 
 
    </select> 
 
    </div> 
 
    <div class="form-group col-md-6"> 
 
    <label for="createClass">Class</label> 
 
    <select class="form-control" name="class" id="createClass" ng- 
 
    model="createStudent.classId" ng-options="item.number for item in 
 
    allClass" required> 
 
     <option value="" selected disabled>Select</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
    <div class="form-group col-md-6 text-md-center"> 
 
    <label for="createCategory">Type of Category</label> 
 
    <select class="form-control" name="category" id="createCategory" 
 
    ng-model="createStudent.type" ng-options="item.category_type for 
 
     item in allcategoriestypes" required> 
 
     <option value="" selected disabled>Select</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="row align-items-end justify-content-center"> 
 
    <div class="form-group col-md-6 text-md-center"> 
 
    <label for="createTeacherName">Teacher Name</label> 
 
    <input type="text" class="form-control" name="teacher" 
 
    id="createTeacherName" ng-model="createStudent.name" 
 
    placeholder="Enter Teacher Name" required> 
 
    </div> 
 
</div> 
 
</div> 
 
<div class="text-center pt-1"> 
 
<button type="submit" class="btn btn-info px-5" ng- 
 
    click="create(createStudent)" ng- 
 
    disabled="createForm.$invalid">Save</button> 
 
</div> 
 
</form> 
 
</body> 
 

 
</html>

來源

2017-07-28 05:07:55 Balasubramanian

當我運行該項目時，其實它不工作。 – Nagesh

現在工作嗎？ – Balasubramanian

不知道爲什麼它不工作。在其他頁面工作。 – Nagesh

角形式驗證$無效不工作

回答

相關問題