I am using ng-repeat and I am various levels in such as:
`ul in output.content.innercontent` or `li in ul.content.innercontent`
my input looks like this:
<input id="{{input.key}}" name="{{input.label}}" type="text"
value="{{input.value}}" placeholder="{{input.defaultValue}}"
value="{{input.label}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
On any one of those whenever a change happens and then an onBlur I want to make a call. Is this possible with ng-model & ng-model-options="{updateOn:'blur'}" with all these fields? The bind behavior I see online are mostly of an input to read-only field somewhere. Should I use ng-blur followed with a on("change") type of behavior?
try with
<input id="{{input.key}}" name="{{input.label}}" type="text"
ng-model="{{input.value}}" <!-- this -->
placeholder="{{input.defaultValue}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
ng-model should do it
<input ng-model-options"{updateOn: 'blur'}"/>
==> This update the model only when user get outside the input
To call a function on-blur :
<input ng-blur="callThisFn()"/>
Related
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">
I have a form, and the form has multiple inputs that are all bound to different variables. Before submitting the form, I need to do validity checks, pristine checks, etc. For example, I want my submit button to be disabled if every part of the form is pristine, or if something is invalid.
Using Angular 5, I am trying to get access to the .pristine, .valid, and .invalid flags for each input field, but the values are either undefined or "cannot get .pristine of undefined".
I am able to get these flags on the entire form itself, but this doesn't help, because I want to know how to get it for each individual input.
Here is my current code (I've removed a number of my inputs to simplify the example).
<form #editDetailsForm="ngForm" name="editDetailsForm" >
<label for="name"> Name </label>
<input type="text" id="name" name="name" maxlength="40" [(ngModel)]="myName" required />
<label for="description"> Description </label>
<textarea id="description" name="description" maxlength="250" [(ngModel)]="myDescription" required ></textarea>
<button id="submit" type="button"
[disabled]="saveButtonDisabled(editDetailsForm.invalid, editDetailsForm.name.invalid, editDetailsForm.description.invalid)"
(click)="updateDetails()" >
Save
</button>
</form>
If you see, I bind disabled attribute on the Save button to saveButtonDisabled() function, where I want to pass in information about each input's validity. The first argument, editDetailsForm.invalid returns a true or false, but the other values return undefined.
How do I check validity of these individual inputs?
EDIT: I realize I can derive all of this info inside my component because all of the input values are bound. However, it'd be easier just to check a flag or two.
I'm not sure I totally understand what you want to do, but this is how you get access to the form controls .pristine, .invlaid
<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
The #name="ngModel" sets a template reference to the FormControl angular creates
Then you should be able to do something like this:
<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
<div *ngIf="name.pristine">
Name is Pristine
</div>
Just to clarify, the individual form fields bubble up to the form itself. So if any field has been touched, then the whole form will be pristine == false.
You can access the input controls using the .controls property, like:
<button id="submit" type="button"
[disabled]="editDetailsForm.controls.name?.invalid || editDetailsForm.controls.description?.invalid">
Created a stackblitz. https://stackblitz.com/edit/angular-5ir4k7
Added template reference variable for ngModel and validate using isValid.
In a page, I have a section for date-range selection. A large portion of our user base is IE 10/11, which does not support input type="date". I'm using Modernizr to show/hide the date input based on the support, and when not, provide an input of type="text", both bound to the same ng-model. Typing into the text spams the console with errors, as the text and date are incompatible. Is there a way to fix this console spam? Using a third-party library is not an option.
<div class="col-md-3" data-ng-show="searchBillCreatedDate == 'custom'">
<label>From</label>
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-show="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-show="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
</div>
Change your ng-show to ng-if like this:
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-if="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-if="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
You're getting the error because it's binding to the the first input's model, which is a date input. ng-show just uses CSS to hide the element but it still exists in the DOM. ng-if, however, completely removes it from the DOM, leaving you with one ng-model="searchFromDate"
I have this situation: I need to add quotes inside an input text field (html) without changing the value of the input. I'm working with angular so I use ngModel, it looks like this
<input ng-model="data" type="text" />
I want the input field to show "whatever is in {{data}}" but the variable data itself remains unchanged (no quotes).
I haven't found any css/Angular tricks yet... any ideas?
Using ng-model="data" in <input type="text"> binds the data with entire text field. This is not particularly useful in situations where you want only a portion of text(being displayed in text field) to get bind with the scope.
For instance, if you do
<input type="text" value="prefixText {{name}} suffixText" ng-model="name">
The input box will display whatever is in name(with no prefix/suffix text)
However, there's a workaround. Use ng-bind on the variable and mention prefix/suffix text separately in the value="..." attribute.
<input type="text" value="prefixText {{name}} suffixText" ng-bind="name">
Here's the demo
You can try this
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Telephone</mat-label>
<span matPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234">
<mat-icon matSuffix>mode_edit</mat-icon>
</mat-form-field>
</form>
Demo
I have two input fields with different ng-model name, how do i bind these two data.
<input ng-model="trip.name" type="text">
<input ng-model="customer.name" type="text">
i want the data filled in "trip.name" auto-filled in "customer.name",
How should i proceed with this.
You can use ng-change directive to achieve this. The html would look like
<input ng-model="trip.name" type="text" ng-change='customer.name=trip.name;'>
<input ng-model="customer.name" type="text">