How to validate input without form tag in angular js?

Question

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

I can put div class="zipContent"> .. inside a form tag but when I will copy this in popup, then same form will be repeated. — Praveen D
– Praveen D, Commented Aug 30, 2016 at 6:14
You will probably have to $compile the HTML you cloned to make it work in angular way with bindings and directives. form tag is not a requirement for validation as validation directives are applied to elements directly. — sabithpocker
– sabithpocker, Commented Aug 30, 2016 at 6:16

Stepan Kasyanenko · Accepted Answer · 2016-08-30 07:06:40Z

2

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

answered Aug 30, 2016 at 7:06

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Praveen D Over a year ago

this looks good, validation error should be shown when user click on button. not on popup load.

Stepan Kasyanenko Over a year ago

I'm update plunker.

Jaydeep Gondaliya · Accepted Answer · 2016-08-30 06:16:02Z

0

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="[email protected]" 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>

answered Aug 30, 2016 at 6:16

Jaydeep Gondaliya

3216 silver badges17 bronze badges

1 Comment

Praveen D Over a year ago

update plunker with code, but its not working for me.

Collectives™ on Stack Overflow

How to validate input without form tag in angular js?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related