Develop Reference

How to detect input field value changes in angular with each value insertion?

How to detect input field value changes immediately without pressing enter button in angular ?
I was trying to trigger a function on a value change of input field in Angular. Initially I used Keypress event, that was detecting the insertion the input field correctly, but even I used backspace to remove any character from the value, it didn't trigger that function, which means that these changes went unnoticed. I was expecting that it would trigger that event on the each change or update of the value.

you can use [(ngModel)]. I suggest you "split" the "bannana sintax"
<input matInput placeholder="Word"
[ngModel]="search"
(ngModelChange)="search=$event;doSomething($event)">
doSomething(value:string)
{
console.log(value)
}
Another ways can be
<!--see that the event "input" return a "generic event"
so you use $event.target.value to "reach" the value-->
<input matInput placeholder="Word"
[(ngModel)]="search"
(input)="doSomething($event.target.value)">
Or
<input matInput placeholder="Word"
[(ngModel)]="search"
(ngModelChange)="doSomething($event)">

Using Input
In HTML
<input (input)="type($event)" type="text" />
In TS
type(event) {
console.log(event.target.value);
}
Using ngModel
In HTML
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
In TS
mymodel:any
valuechange(newValue) {
this.mymodel = newValue;
console.log(newValue)
}
Demo Link :- Link

By using two-binding and ngModelChange event, worked for me to detect all changes.
Sample code :
<input matInput placeholder="Word"
[(ngModel)]="search"
(ngModelChange)="filterTbl()"
matTooltip="Filter Result">

Placeholder is not working with ng-model

HTML
With ng-model - Not working
<input type="text" ng-model="Event.Sponsor.Amount" name="donationAmount" placeholder="{{PlaceHolderOther}}" required />
Without ng-model - Working
<input type="text" name="donationAmount" placeholder="{{PlaceHolderOther}}" required />
JS
$scope.PlaceHolderOther = "$50.00";
Could you tell me why placeholder is not working with ng-model ? It's working fine without ng-model.Thanks in advance.
Out put (When it runs)
<input type="text" name="donationAmount" placeholder="$50.00" ng-model="Event.Sponsor.Amount" required="" class="ng-pristine ng-valid ng-valid-required">
It shows the placeholder value properly.But not display it to the user.Why ?
UPDATE : I have found out the issue.That is texbox has been initialized automatically.When we remove that value then it shows the placeholder value.So how to avoid this by default ?

Try data-ng-model, refer to http://jsfiddle.net/pranav93/ww3k4hxp/6/ .
Something like,
<input id="ship-address-line-3" name="ship_address_line3" placeholder="{{shippingFormOrderItemAction.ship_address_line3}}" data-ng-model="retryAutoDetails.ship_address_line3" type="text">

Did you defined
$scope.Event = {};
Try above with.
Yes: updated answer according.. (typo mistake corrected)

Angularjs assigning value to ng-model using ng-init

Hi I have following issue which seems easy and should work but is not.
In my code I have input
<input type="text" ng-model="c.Id" ng-init="c.Id={{pId}}"/>
When I look at the DOM using firebug tool I see the value
<input type="text" ng-model="c.Id" ng-init="c.Id=6"/>
But it wont display 6 in the input box neither I can access it using #scope.
Please let me know what is wrong here and how to fix it so that ng-model can have from ng-init.
Thanks

Get rid of the braces in the expression so that it will evaluate pId directly from the scope
<input type="text" ng-model="c.Id" ng-init="c.Id=pId"/>
Plunk

ng-inittakes an expression and therefore you do not need the curly braces:
<input type="text" ng-model="c.Id" ng-init="c.Id=pId"/>

Assigning the value to ng-model using ng-value
<input type="text" class="form-control" ng-model="inputPrice" />
<input type="text" ng-model="newPrice" ng-value="newPrice=inputPrice" />

angularjs form input suggestions

I have a problem with a form in angularjs.
Example with classic html & php
<form name="myForm" action="post.php" method="post" autocomplete="on">
<input name="namename" type="text" />
<input name="email" type="text" />
<input name="submit" type="submit" value="submit" />
</form>
which works as expected. On the second visit, after i submitted the form for the first time, i just need to type the first letter and the input field will suggest something based on the first post.
The same form in angular.
<form name="myForm" ng-submit="test(user)" autocomplete="on">
<input name="name" type="text" ng-model="user.name" autocomplete="given-name" />
<input name="email" type="text" ng-model="user.email" />
<input name="submit" type="submit" value="submit" />
</form>
On the second visit here the form will suggest nothing at all, which is very irritating.
Is there any fix for that?
Example
thanks in advance.

That behaviour you're describing is done by the browser and is not guaranteed to work in all situations. It's actually quite easy to do in AngularJS; just keep track of a shared state object. This can be done in several ways, the most easiest by using the value provider like this:
// Create an injectable object with the name 'userInput'
angular.module('myApp').value('userInput', {});
Now inject this object in the controller that is handling the form like this:
angular.module('myApp').controller('MyController', function($scope, userInput) {
// Assign the state object to the scope so it's available for our view
$scope.user = userInput;
});
Render the form as you did and you'll see that the state of the form is kept. In fact, this is one of the hidden gems when programming with Angular since it allows you to keep very complex state information, which was previously pretty impractical.
Live demo can be found in this plunker.
Edit
One way to get the autocomplete to work is to maintain datalist elements. Just store the previous entered values in an array and use a ng-repeat to render all the options. Associate the input element with the datalist using the list attribute and you'r good to go.
<input list="nameHistory" type="text" ng-model="user.name" />
<datalist id="nameHistory">
<option ng-repeat="item in userHistory.name" value="{{ item }}"></option>
</datalist>
Live demo can be found in this plunker.

Just add to the input tag this attribute autocomplete="off"

AngularJS Use Input Value Attribute

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'">