Set textarea directive value in Angular

Set textarea directive value in Angular

Today, We want to share with you Set textarea directive value in Angular.
In this post we will show you Set textarea directive value in Angular, hear for Set textarea directive value in Angular we will give you demo and example for implement.
In this post, we will learn about Set textarea directive value in Angular with an example.

Set textarea value in AngularJs simple example – It is very easy to set the value your custome value attribute of the input field in textarea.

The HTML textarea element fields control with AngularJS data-binding.

AngularJS modifies (textarea html area) the default behavior of textarea elements in HTML, but only if the ng-model directive attribute is present.

READ :  AngularJS Filter inside controller - angular custom filter example

The Textarea element represents the data value of each state is Boolean value(0 or 1) and it either true or false.

The simple databinding and data validation properties of this all element are the same as the input element HTML.

Syntax for textarea directive in AngularJS:

 <textarea ng-model="name" name="dval" id="dval"></textarea>

Textarea : Usage

<textarea
  ng-model="string"
  [name="string"]
  [ng-minlength="number"]
  [ng-maxlength="number"]
  [ng-pattern="string"]
  [required="string"]
  [ng-required="string"]
  [ng-change="string"]
  [ng-trim="boolean"]>
...
</textarea>

Properties of the textarea HTML directive in AngularJS application:

Properties Description
ng-pristine Denotes no fields has not been modified.
ng-dirty One or more fields has been changed.
ng-invalid Content in the form is not valid.
ng-valid Content in the form is valid.
ng-valid-key One key for each validation. (Example: more than one thing to be validated.) ng-valid-required
ng-invalid-key Example: ng-invalid-required
ng-invalid-key Example: ng-invalid-required
$touched Denotes that the field has been touched
$untouched Denotes that the field has been not touched
READ :  Vuejs - Converting a String to Object - Vuejs string to object Parsing JSON

Textarea Directive Info Example

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://www.infinityknow.com/libs/angular.min.js"></script>
 <script>
var infinityknowApp = angular.module("infinityknowApp", []);
 infinityknowApp.controller("textCtrl", function($scope) {
 $scope.descmsgtext = '';
 $scope.setTextareaValue = function() {
     $scope.descmsgtext = "Hi Welcome to the infinityknow.com!";
 };
});
</script>
</head>
<body>  
<div ng-app="infinityknowApp">  
<div ng-controller="textCtrl">  
               <textarea  name="mytext" ng-model="descmsgtext"></textarea>
		<hr/>
		<input type="button" ng-click="setTextareaValue()" value="Set Text" ></br>
		<hr/>
		<a class="demo-css" href="http://infinityknow.com/tutorial/" target="_blank" rel="nofollow" alt="Set textarea value in AngularJs" title="Set textarea value in AngularJs">View Demo</a>

</div> 
</div>
</body>  
</html>      

Add a Comment

Your email address will not be published. Required fields are marked *