如何验证在角度js中没有表单标签的输入？ [英] How to validate input without form tag in angular js?

问题描述

在弹出窗口中，我显示的是从另一个div复制并在弹出窗口中显示的html。
在这里我想验证这个输入字段是否必需。并在输入框下方显示错误消息。
index.html




×
加载中...


p>

 <！ - 更改邮政编码的HTML  - > 
 
< div class =hiddenid =updateZipContent> 
< div class =zipContent> 
< div class =padding-bt-2>请输入新的邮政编码< / div> 
< div class =row> 
< div class =text-left col-md-6 padding-bt-2> 
< input ng-model =zipCodetype =textclass =form-controlmaxlength =5data-required =truenumber-only> 
< / div> 
< div class =text-left col-md-4> 
< button class =btn btn-primary form-control>更新< /按钮> 
< / 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; 
 
 $ / code> 

为了让其他动作分开，我编写了新的控制器utilityCtrl.js。这里我写了隐藏这个弹出窗口的操作。

  $ scope.closePopup = function（）
 {
 console.log（'here in utility'）; 
 $ rootScope.myModal = false; 
 document.getElementById（'dynamicContect'）。innerHTML =; 
} 
  

如何在此设置验证？
https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview

解决方案

查看更新 plunker 。

我们可以使用 $ b

  $ 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）{
 //将克隆附加到DOM文档的正确位置
 secondDivContent.innerHTML = ; 
 angular.element（secondDivContent）.append（clonedElement）; 
}）; 
} 
  

In popup I am showing html which I copy from another div and show in popup. Here I want to validate this input field for required. and show error message below input box. index.html × Loading ...

  <!-- 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>

Change zip code action is written in autoQuotectrl.js

$scope.changeZipCode = function()
                    {
                        $rootScope.myModal = true;
                        var firstDivContent = document.getElementById('updateZipContent');
                        var secondDivContent = document.getElementById('dynamicContect');
                        secondDivContent.innerHTML = firstDivContent.innerHTML;                        
                    }   

To keep other action separate I wrote new controller utilityCtrl.js. Here I wrote action for hide this popup .

$scope.closePopup = function ()
        {
            console.log('here in utility');
            $rootScope.myModal = false;
            document.getElementById('dynamicContect').innerHTML = "";
        }

How to set validation here? https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview

解决方案

See updated plunker.

We can use $compile directive.

$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);
                  });                        
                }

这篇关于如何验证在角度js中没有表单标签的输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！