How to add input forms dynamically in Angular JS

Question

I want to change the form inputs dynamically , and i have tried doing it using ng-bind-html , but only label is getting displayed , text box doesn't appears on the DOM. Here what has to be written inside ctrl.content depends upon the values from the server.

Note

type value will be coming from server , and it can be dynamic

HTML

<div ng-bind-html="ctrl.content">

Controller

function myCtrl(type) {
   var ctrl = this;

   switch (type) {
     case 1:
      ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
       break;
       case 2:
        ctrl.content = " <div> Input : <input type=\"textarea\" > </div> ";
         break;
     default:


   }

Dom Element :

<div class="padding ng-binding ng-scope" ng-bind-html="addMeassurments.content"> <div> Input :  </div> </div>

that looks jQueryish.. how about using ng-show/hide/if/switch instead? — tanmay
– tanmay, Commented May 12, 2017 at 10:58
the content to be displayed is dynamic, so i couldn't use ng-if/hide. — Haris KK
– Haris KK, Commented May 12, 2017 at 11:01
You're assigning your controller the value - shouldn't you assigning the $scope instead? — RamblinRose
– RamblinRose, Commented May 12, 2017 at 11:09
Possible duplicate of How can I use Angular to output dynamic form fields? — tanmay
– tanmay, Commented May 12, 2017 at 11:09

RamblinRose · Accepted Answer · 2017-05-12 12:23:55Z

First, your assignment is all wrong

ctrl.content = " <div> Input : <input type=\"text\" > </div> ";

You should be assigning the markup to a $scope property. e.g.

$scope.content = " <div> Input : <input type=\"text\" > </div> ";

Secondly you should use the $sce service to sanitize the html. Here's a plnkr where this code demonstrates the intended behavior

var app = angular.module('plunker', []);

app.controller('Ctrl', function($scope, $sce) {
  $scope.name = 'World';
  var ctrl = this;
  $scope.click = function myCtrl(type) {
    switch (type) {
      case 1:
        $scope.content = $sce.trustAsHtml("<div> Input : <input type=\"text\" > </div> ");
        break;
      case 2:
        $scope.content = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> ");
        break;
      default:
    }
  }
});

Note also that I changed your markup from input type="textarea" to a textarea element.

Slava Utesinov · Accepted Answer · 2017-05-12 11:56:01Z

You should use $sce service with ngSanitize module:

angular.module('app', ['ngSanitize'])
.controller('MyController', ['$scope', '$sce', function($scope, $sce) {
    $scope.html = function(){
      return $sce.trustAsHtml(`<div> Input : <input type=\"${$scope.type == 0 ? 'text' : 'textarea'}\" > </div>`);
    }
}]);

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script>

<body ng-app="app">
  <div ng-controller="MyController" ng-init='type="0"'>
    text: <input type="radio" ng-model="type" value="0">
    textarea: <input type="radio" ng-model="type" value="1">
    <div ng-bind-html="html()"></div>
  </div>
</body>

Manikandan Velayutham · Accepted Answer · 2017-05-12 12:03:57Z

A textarea can not render HTML input type like <input type=\"textarea\" >..

and try with $sce.

var app = angular.module('exApp',[]);
app.controller('ctrl', function($scope,$sce){
$scope.text = $sce.trustAsHtml("<div> Input : <input type=\"text\" > </div> ");
$scope.textArea = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> ");

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<div ng-bind-html="text"></div><br>
<div ng-bind-html="textArea"></div><br>
</body>

bamtheboozle · Accepted Answer · 2017-05-12 11:01:08Z

0

Use ng-if instead of ng-bind-html.

Something like this:

<div>
    <div ng-if="type===1">Input : <input type="text"></div>
    <div ng-if="type===2">Input : <input type="textarea"></div>
</div>

And in your controller, you will only need to dynamically assign type either 1 or 2 as value.

answered May 12, 2017 at 11:01

bamtheboozle

6,5062 gold badges21 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to add input forms dynamically in Angular JS

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related