[英]How to validate input without form tag in angular js?
在彈出窗口中,我顯示的是從另一個div復制並在彈出窗口中顯示的html。 在這里,我想驗證此輸入字段是否為必填項。 並在輸入框下方顯示錯誤消息。 index.html×正在加載...
<!-- html of change zip code -->
<div class="hidden" id="updateZipContent">
<div class="zipContent">
<div class="padding-bt-2">Please enter new zip code</div>
<div class="row">
<div class="text-left col-md-6 padding-bt-2">
<input ng-model="zipCode" type="text" class="form-control" maxlength="5" data-required="true" number-only>
</div>
<div class="text-left col-md-4">
<button class="btn btn-primary form-control">Update</button>
</div>
</div>
</div>
</div>
更改郵政編碼操作是用autoQuotectrl.js編寫的
$scope.changeZipCode = function()
{
$rootScope.myModal = true;
var firstDivContent = document.getElementById('updateZipContent');
var secondDivContent = document.getElementById('dynamicContect');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
為了使其他操作分開,我編寫了新的控制器實用程序Ctrl.js。 在這里,我寫了隱藏該彈出窗口的操作。
$scope.closePopup = function ()
{
console.log('here in utility');
$rootScope.myModal = false;
document.getElementById('dynamicContect').innerHTML = "";
}
如何在這里設置驗證? https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview
請參閱更新的插件 。
我們可以使用$ compile指令。
$scope.changeZipCode = function()
{
$rootScope.myModal = true;
var firstDivContent = document.getElementById('updateZipContent');
var secondDivContent = document.getElementById('dynamicContect');
var clonedElement = $compile(firstDivContent.innerHTML)($scope, function(clonedElement, scope) {
//attach the clone to DOM document at the right place
secondDivContent.innerHTML ="";
angular.element(secondDivContent).append(clonedElement);
});
}
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; });
<html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> </head> <body ng-controller="MainCtrl"> <div ng-form="myForm"> <input type="text" required ng-model="user.name" placeholder="Username"> <button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button> </div> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.