Angular textarea validation error - javascript

I have a textarea in my app like so:
<textarea type="text" class="form-control" name="bioBackground" ng-model="obj.background" value="obj.background" ng-change="autosave()" maxlength="1500" required></textarea>
This is a required field and as you can see I have added a required tag in the code. But this required tag is causing errors with Angular.
For example:
If I type in the field and backspace and remove all the text it removes the object from the scope. see example below:
Before Backspacing
You can see background variable is in the scope.
After backspacing and removing the text:
You can see the background variable is gone from scope.
This only happens if I use required tag. If I don't use the required tag it works fine and even after removing all the text the background variable stays within the scope.
What am I doing wrong.

its working , background is undefined while remove all text using backspace.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.obj = {
"experience":{
"field0":"asdf",
"field1":"asss"
},
"background":""
};
console.log($scope.obj);
$scope.autosave=function(){
console.log($scope.obj);
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<textarea type="text" class="form-control" name="bioBackground" ng-model="obj.background" value="obj.background" ng-change="autosave()" maxlength="1500" required></textarea>
</body>
</html>

Related

Error coming up while using ng-repeat for a array in javascript

I am stuck at this issue while running my code
<div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
<md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>
I keep getting this error.
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: filters in activeFilterCtrl.selectedfilters, Duplicate key: string:a, Duplicate value: a
Please provide the solution Following is the value of selected filter
selected filter value is [{"params":"min","value":5}, {"params":"max","value":30}]
try with this
ng-repeat="filters in activeFilterCtrl.selectedfilters track by $index"
Try this Demo Link
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl as activeFilterCtrl">
<div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
<md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.selectedfilters = [{"params":"min","value":5}, {"params":"max","value":30}]
});

Assign controller to element dynamically after bootstrap

I have an AngularJS app that I manually bootstrap at time 't'. At time 't + 1', I would like to show an HTML element that has no ng-controller attached. I would like to dynamically add a ng-controller to this element so it can communicate with my javascript code.
How can I do that?
PS I tried to dynamically add the ng-controller attribute to the element but it doesn't work.
To do that you need to compile elements.
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="main.js"></script>
<meta charset=utf-8 />
<title>Angular JS</title>
</head>
<body ng-controller="parentCtrl">
<button ng-click="setCtrl2()">Set Controller</button>
<div id="placeholder">
<span></span>
<select>
<option></option>
</select>
<span class="input-append">
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" />
<input type="submit" class="btn btn-primary" ng-click="addRow()" value="+ add" />
</span>
</div>
</body>
</html>
Javascript
angular.module('app', []);
angular.module('app').controller('ctrl', function($scope) {
$scope.rows = ['Paul','John','Lucie'];
$scope.name = 'Jack';
$scope.addRow = function(){
$scope.rows.push($scope.addName);
$scope.addName = "";
console.log($scope.rows);
};
})
.controller('parentCtrl', function($scope) {
$scope.setCtrl2 = setCtrl;
});
function setCtrl() {
var elem = document.getElementById('placeholder');
elem.setAttribute('ng-controller', 'ctrl');
var eSpan = elem.children[0];
var eSelect = elem.children[1].children[0];
eSpan.setAttribute('ng-bind', 'name');
eSelect.setAttribute('ng-repeat', 'row in rows');
eSelect.setAttribute('value', '{{ row }}');
eSelect.setAttribute('ng-bind', 'row');
var injector = angular.element(elem).injector();
var compile = injector.get('$compile');
var rootScope = injector.get('$rootScope');
var result = compile(elem)(rootScope);
// When outside of AngularJS you need to call digest
// rootScope.$digest();
}
See: http://codepen.io/skarllot/pen/LVKpgd
You don't mention whether you've looked at previously asked questions. I found two which look like they could address the question you've asked:
Loading an AngularJS controller dynamically
How to bind an AngularJS controller to dynamically added HTML?

AngularJS replace using regex on template

I have the following markup that shows a value from ng-model.
<a ng-click="downloadDocument()">{{document.content.replace(/\d+\_/,"")}}</a>
Before each document.content I add a number and an underscore, smth like "12122141_document.txt". I want to replace this part by using this regex /\d+_/
This throws an error on angularJS, although {{ document.replace(" ","") }} works.
Is the only way to solve this a directive or am I doing something wrong?
Plunker: http://embed.plnkr.co/sh54XZwSIlYnmvY0eTIt/preview
Cheers,
Alex
I modified your Plunker-Demo and it works pretty fine.
Hint: Don't use $scope namespaces like "document". Its reserved/used by the client.
var app = angular.module('plunker', []);
Controller
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.fileName = {
content : function(){
return '1233_test.txt'.replace(/\d+\_/,"");
}
}
$scope.mpla = function () {
console.log('clicked');
}
});
View
<!DOCTYPE html>
<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="angular.js#1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<a ng-click="mpla()" ng-bind="fileName.content()"></a>
</body>
</html>

How to retrieve the ng-model value to a controller in AngularJS

I have a simple view with an input text field in which the user enter his name and a controller must retrieve that value an assign to employeeDescription variable. The problem is that the ng-model value (from the input) doesn't come to the controller, I just tried using $watch like Radim Köhler explains Cannot get model value in controller method in angular js but doesn't work. I just think it must be simple.
Also a just try by retrieving the name variable (ng-model) from the $scope, like $scope.employeeDescription = $scope.name; but doesn't retrieve value and the Google chrome console doesn't give me any output about that. Any solution?
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-app='angularApp'>
<div ng-controller='nameController'>
<div>
Name <input type="text" ng-model='name' />
</div>
Welcome {{employeeDescription}}
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
(function(angular) {
var myAppModule = angular.module('angularApp', []);
myAppModule.controller('nameController', function($scope) {
$scope.employeeDescription = name;
});
})(window.angular);
Your code should fail, cause the 'name' variable in the controller is never defined. You have two variables defined in your code: $scope.employeeDescription and $scope.name (defined in the ng-model of the input). Note that '$scope.name' is being defined, not 'name'.
My suggestion is to leave only one variable:
<div>
Name <input type="text" ng-model='employeeDescription' />
</div>
myAppModule.controller('nameController', function($scope) {
$scope.$watch('employeeDescription', function() {
console.log($scope.employeeDescription);
});
});

Angularjs ngDisabled comparison expression not evaluating correctly

I am attempting to have a button be enabled or disabled in an angularjs app based on whether a comparison of two text fields evaluates to true or false. I have provided example code below and also made it available in a plunker here http://plnkr.co/edit/rzly8hy21048YGzsx2gW?p=preview
As you can see when you input a string to match the stored string the expression evaluates correctly however the button never becomes available.
Any help would be appreciated.
Here is the HTML
<!DOCTYPE html>
<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="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="updateCounter()">Increment count</button>
<input type="text" ng-model="inputfield">
<input type="button" value="Continue" ng-disabled="{{inputfield !== startertext}}">
<br>startertext: {{startertext}}
<br>nputfield: {{inputfield}}
<br>test: {{inputfield !== startertext}}
</body>
</html>
And the Javascript file is below.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.startertext = 'hello world';
});
Remove the curlies around your ng-disabled attribute.
Here's the way it worked for your plunk:
<input type="button" value="Continue" ng-disabled="startertext != inputfield">
Don't forget to remove the extra curlie in your controller (marked by an error sign when I opened it in the editor).

Categories