[英]Validation ng-form Angular not working
我使用ng-form制作了一個表單，並且如果輸入字段無效，想禁用按鈕，我已經嘗試過了，但是仍然無法正常工作。 我不是我所想念的。
這是代碼
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="memo.nestedForm.perihal.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim
</button>
<form class="tab-form-demo" ng-controller="userCtrl" role="form" name="memo" novalidate>
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Informasi Surat">
<ng-form name="nestedForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-1 col-sm-2 control-label">Perihal</label>
<div class="col-md-10 col-sm-10">
<input type="text" class="form-control" ng-model="surat.subject" name="perihal" required>
<div ng-show='nestedForm.perihal.$dirty && nestedForm.perihal.$invalid'>
<span ng-show='nestedForm.perihal.$error.required'>Required</span>
</div>
</div>
</div>
</ng-form>
</uib-tab>
</uib-tabset>
</form>
嘗試將按鈕插入tag中。
<form class="tab-form-demo" ng-controller="userCtrl" role="form" name="memo" novalidate>
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Informasi Surat">
<ng-form name="nestedForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-1 col-sm-2 control-label">Perihal</label>
<div class="col-md-10 col-sm-10">
<input type="text" class="form-control" ng-model="surat.subject" name="perihal" required>
<div ng-show='nestedForm.perihal.$dirty && nestedForm.perihal.$invalid'>
<span ng-show='nestedForm.perihal.$error.required'>Required</span>
</div>
</div>
</div>
</ng-form>
</uib-tab>
</uib-tabset>
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="memo.nestedForm.perihal.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim
</button>
</form>
您應該在表單內移動按鈕以進行validate
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <h2>Validation Example</h2> <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>Username:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">Username is required.</span> </span> </p> <p>Email:<br> <input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span> </span> </p> <button class="btn btn-primary btn-sm" ng-click="compose('Submit',1)" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> <i class="fa fa-paper-plane-o"> </i> Kirim </button> </form> <button class="btn btn-primary btn-sm" ng-click="compose('Submit',1)" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> <i class="fa fa-paper-plane-o"> </i> Kirim outside form </button> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) { $scope.user = 'Test'; $scope.email = 'Test@gmail.com'; }); </script> </body> </html>
請運行上面的代碼，並檢查兩個按鈕
使用ng-form進行角度ng-repeat，在控制器中訪問驗證
[英]Angular ng-repeat with ng-form, accessing validation in controller
angular ui版本0.10.0破壞了制表符內的ng-form驗證
[英]angular ui version 0.10.0 breaks ng-form validation inside a tab
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.