CODEWITHSUNDEEP
angularjs
Usman
Usman

Reputation: 2577

Model values are not binding with editor Angularjs

My text editor model value is not binding which is of type textarea as well, and I have html formatted text in it. When I call my save method, this editor's model variable is null. I am not able to understand why this is happening as model with simple input type text is working fine, what could be the issue with the text editors model. Following is my code kindly have a look at this, may be I am doing something wrong.

<div class="col-md-12">
                    <div class="form-group">
                        <input type="text" ng-model="TemplateName" class="form-control" placeholder="Enter Template Name">                            
                    </div>
                    <div class="form-group">
                        <textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription" ng-bind-html="TemplateDescription" placeholder="Enter Agreement Template ..." ></textarea>
                    </div>
                </div>

And this is my controller code:

$scope.Template = {
            Name: $scope.TemplateName,
            Description: $scope.TemplateDescription,                
        };

       var promisePost = templateService.post($scope.Template);
            promisePost.then(function (pl) {

                //success message

            }, function (err) {

                //error message

            });

Upvotes: 1

Views: 743

Answers (3)

ismail baig
ismail baig

Reputation: 891

yes use ng-model for binding

html as 

div class="form-group">
  <input type="text" ng-model="TemplateName" class="form-control" placeholder="Enter Template Name">
</div>
<div class="form-group">
  <textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription" 
  ng-bind-html="TemplateDescription" 
  ng-model='TemplateDescription' // add ng-model
  placeholder="Enter Agreement Template ..."></textarea>
</div>

here is the plnkr link

Upvotes: 1

Sachin
Sachin

Reputation: 2775

Use ng-model instead of ng-bing-html 

<div class="col-md-12">
    <div class="form-group">
      <input type="text" ng-model="TemplateName" 
       class="form-control" placeholder="Enter Template Name">                            
     </div>
    <div class="form-group">
      <textarea cols="18" rows="40" 
      class="wysihtml5 wysihtml5-min form-control" id="templateDescription" 
      ng-model="TemplateDescription" 
      placeholder="Enter Agreement Template ..." ></textarea>
    </div>
 </div>

Check my pen http://codepen.io/keephacking/pen/kXVjOX?editors=1010

Upvotes: 0

Bon Macalindong
Bon Macalindong

Reputation: 1320

You should use ng-model and bind it directly to Template.Description

HTML

<div ng-app>
  <div ng-controller="sampleCtrl">
    <textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" id="templateDescription" ng-model="Template.Description" placeholder="Enter Agreement Template ..."></textarea>
    {{Template.Description}}
  </div>
</div>

Controller

function sampleCtrl($scope) {
  $scope.Template = {
    Description: ''
  };
}

See this fiddle for your reference

Upvotes: 1

Related Questions