AngularJS Use Input Value Attribute - javascript

How can I direct AngularJS to assimilate the value attribute into the model? Any field that I give an ng-model attribute has its value immediately replaced with nothing, or whatever I define in the controller. Here's some code:
<form action="" method="post" ng-controller="PageCtrl">
<input type="text" name="title" ng-model="title" value="Initial field value">
</form>
And the Javascript...
function PageCtrl($scope, Slug) {
$scope.title = null;
}
I've tried not setting$scope.title, setting it to other things, but no matter what I do, the value is completely ignored. What can I do?

Yes, the value attribute is ignored by angularjs in favor of ng-model. It'd better just to remove value from your input entirely to avoid confusion.
The angular way of setting the default value would be to set $scope.title = 'Initial field value' inside your controller, and that's the preferable way to structure things as far as possible. If that's not possible then you can use ng-init on the input to do the same thing too, e.g.
<input type="text" name="title" ng-model="title" ng-init="title = 'Initial field value'">

Related

How can I get value based on name with multiple ng-model with unique name?

How can I get value based on name? ng-model is the same but name is unique.
<input type="text" name="name1" ng-model="field.value">
<input type="text" name="name2" ng-model="field.value">
I tried with following code, but no luck! I wanto to show 'some value' only in the name contains name1.
if(document.getElementsByName('name1')){
$scope.field.value = 'some value';
}
Hi just a suggestion please be more descriptive while asking question. It might help other to understand the question.
Problem:
As far as I know you want to show changed value in input text field having name "name1". But int your case a common variable (field.value) is associated with both the input text field, so any change in field.value will affect both.
Solution:
There are two cases:
1. You even don't want to show the input text field.
2. You don't want to change the value of input text field.
Solution For Case-1
You can you take one boolean variable and use ng-if or ng-show directive with that.
<input type="text" name="name1" ng-model="field.value">
<input type="text" ng-if="showfFlag" name="name1" ng-model="field.value">
Solution For Case-2
You can take one boolean variable and use that to change the modal value for your input text.
<input type="text" name="name1" ng-model="field.value">
<!-- showFlag === true? field.value: " ""
If flag is true then show value else return
old value of empty string depends on you requirement.
You can change that function in your controller.
-->
<input type="text" name="name2" ng-model="showFlag === true? field.value: " "">

AngularJs set ng-model-options to default value

Added this input field in my html file.
<input type="number" ng-model="kita" />
but ng-model is only update when i move mouse out off input field, is there i way to update model immediately,
tried
ng-model-options="{updateOn: 'mouseover'}
not sure whats going on please any help. Not sure where this behaviour is set, or what causing this?
You can try doing like the below code, also please check this plunker for the example scenario.
Template:
<input type="number" ng-model="kita" ng-mouseover="changeKita()" />
<input ng-model="name" ng-model-options="{updateOn: 'mouseover'}">
{{name}}
Controller:
$scope.kita = 1;
$scope.name = "Test Data";
$scope.changeKita=function(){
$scope.kita=$scope.kita+1;
}

Angular1: How to reflect ng-model errors on another element?

I have a directive with the following template
<div>
<span class="label">My Label</span>
<input ng-model="name" required>
</div>
I want the label to be painted red when the input field is invalid.
How can I do that?
Currently I have another directive to sync all the errors from ngModelCtrl to the wrapping div
<div add-all-errors>
...
</div>
And the directive's link function does something like this:
const ngmodel = $element.find('[ng-model]').controller('ngModel');
$scope.$watch(()=>ngmodel.$error, addAllClasses, true);
Where addAllClasses simply makes sure the correct classes appear on the element..
I also tried just adding the same ng-model
<div ng-model="name">
...
</div>
But did not see the classes there..
any better way to do this?
This is why we use the angularjs form... I'm really not sure why people are against using a very handy feature.
I've made a plunker for you.
https://plnkr.co/edit/bGOcQjWzlRq2aTYZUYNm?p=preview
<form name="form">
<span ng-class="{red: form.name.$invalid}">Name:</span>
<input name="name" ng-model="name" required>
</form>
A little more insight of what's going on. form is added to the scope auto magically by angularjs by it's name. In this case, I named it form, however it can be any name.
Now form is an ngForm Object and adds all input field into it by their name attributes. This way we can do form.name to get another object similar to the ngForm Object. We can then use $invalid or $valid properties with ng-class.
ngForm is pretty powerful and is loaded with many cool properties and methods. Just call console.log(scope.form); You will need to put in a method and add it to ng-change to see updates.

Bind input value to ng-click button (send value as parameter)

I'm trying to bind the value from an input field to the parameter of my method on ng-click. Here's what I got, but it doesn't work, and I am not too sure if it's possible to do it this way?:
<input type="text" name="name" value="{{post.PostId}}" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>
$scope.getById = function (id) {
console.log(id);
return $http.get('/api/Post/' + id);
}
You should use ng-model directive for your input element.
Markup
<input type="text" name="name" ng-model="post.PostId" />
<button ng-click="getById(post.PostId)"></button>
<h1>{{post.Title}}</h1>
This will take care of 2-way model binding to your property post.PostId. Your ng-click directive will pick up the correct value entered in input element.
See my working Plunk :)

Require two words in textbox, with AngularJS

I really struggling with this. I need to force the user to write the first and last name, in only one textbox.
I using AngularJS, and I want to validate text field using ng-pattern. The field should accept all characters, and require 2 words.
This is input:
<input name="fistname_lastname" ng-model="fistname_lastname" ng-pattern='my_pattern' type="text">
I have the my pattern in the controller, like this:
$scope.my_pattern = /^\s*\w*\s*$/;
Is there another better way do it.
Yes, you can do it by directive too, but just for validating just text contains two characters or not ng-pattern would be better way to do.
Here your html would be using (.*?[a-zA-Z]){2,} this pattern.
HTML
<input type="text" ng-model="fistname_lastname" max-length="30"
ng-pattern="/^(.*?[a-zA-Z]){2,}$/" placeholder="add new todo here"/>
Working Fiddle
Update
If you want to stop your form from submitting,, then you need to no worry about it. Angular internally manages this for you. Whenever you mention ng-pattern against any form field, angular creates object for that field (field should have name and ng-model attribute), that object is responsible for the validity of particular field. As as ng-pattern regx doesn't gets satisfied, angular make that field as invalid, means it append ng-invalid-pattern & ng-invalid class. Resultant the form also gets invalid. and now if you can look at form object you will find that form gets invalid by using syntax form.$valid on html.
HTML
<form name="form" ng-submit="submit()">
<input type="text" ng-model="firstname_lastname" size="30" ng-pattern="/^(.*?[a-zA-Z]){2,}$/" placeholder="add new todo here"/>
<button type="submit">Submit</button>
</form>
Controller
$scope.submit = function(){
if($scope.form.$invalid) //here you can stop use from submitting for by checking validity
alert('Form is invalid'); //form is invalid
else
alert('Form is valid');//here you can do actual submit to server
}
Updated Fiddle
Hopefully this could help you, Thanks.
Thanks, for all your help. But what really worked was this regular expression.
\b([A-Z]{1}[a-z]{1,30}[- ]{0,1}|[A-Z]{1}[- \']{1}[A-Z]{0,1}
[a-z]{1,30}[- ]{0,1}|[a-z]{1,2}[ -\']{1}[A-Z]{1}[a-z]{1,30}){2,5}

Categories

Resources