如何在Angular JS中验证没有表单标签的输入？
[英]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
2 个解决方案
解决方案1
2 已采纳 2016-08-30 07:06:40
请参阅更新的插件 。
我们可以使用$ 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);
});
}
解决方案2
0 2016-08-30 06:16:02
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>
验证 Html 5 没有表单标签的输入？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.