angular-ngmodel

The default behaviour for updating ngModel (and subsequently validation) is on change ; I would like to change that to on blur . The docs only explain how to do this on a case-by-case basis via: <ANY ng-model-options="{ updateOn: 'blur' }"></ANY> . I went so far as to look thru the source code, but somehow neither ngModelOptions nor ng-model-options is found (despite both occurring in the documentation, which is scraped from the source code). While the ngModel decorators written by Jon/John provide a good behind the scene solution, one must also be aware that declaratively, ngModelOptions need

JSfiddle Problem: I have a SELECT-element in my page, which is filled in with an ng-repeat . It also has a ng-model which has a default value. When I change the value, the ng-model adapts, that's ok. But the dropdown-list shows an empty slot at launch, where it should have the item with the default value selected instead. Code <div ng-app ng-controller="myCtrl"> <select class="form-control" ng-change="unitChanged()" ng-model="data.unit"> <option ng-repeat="item in units" ng-value="item.id">{{item.label}}</option> </select> </div> With JS: function myCtrl ($scope) { $scope.units = [ {'id': 10,

I'm trying to update the value of an Ion.RangeSlider when its bound ng-model scope variable changes. The model updates when the Ion.RangeSlider is used, but not vice-versa. Other inputs with the same ng-model update when the model value changes, so this must be some special case. Edit: Woo! Here's a snippet @lin :) Also jsfiddle . var app = angular.module('ngModelIonRangeSliderDemo', []); app.controller('MainCtrl', function ($scope, $rootScope, $timeout) { $scope.someNumber = 10; }).directive('ionRangeSlider', function ionRangeSlider() { return { restrict: 'A', scope: { rangeOptions: '=',

Can someone please tell me what is the best practice for comparing ngModel old and new value? In angular 1: $scope.$watch('someProperty', funciton(oldVal, newVal){ // code goes here }) I am asking this because (ngModelChange) never brings me the oldVal , only the newVal . In my case, I am using ngModel in a <select> tag and compare the old selection with the new one: <select [(ngModel)]="current" (ngModelChange)="onModelChange($event)"> <option *ngFor="let item of myArray" [ngValue]="item">{{item.name}} </option> </select> This might work (ngModelChange)="onModelChange(oldVal, $event); oldVal

I would like to use a <select> in a form to let the user being able to update values among different <option> . I have used the technique from the guide here: https://angular.io/docs/ts/latest/guide/forms.html . Here is the sample I am talking about: <div class="form-group"> <label for="type">Type :</label> <select class="form-control" [(ngModel)]="order.type" ngControl="type"> <option *ngFor="#type of types" [value]="type">{{type}}</option> </select> </div> In my order-details.component I have got an updateOrder() which calls the updateOrder() from myApp.services. My problem is when I am

Here is a form with two way-binded input fields. The goal was to create the same form to edit and create data. That was accomplished, but I am pretty sure that there could be a better way to do this (like using AbstractControl features). I also miss one fix here - if clickEdit() being clicked need to update form values with that object which user wants to edit. Thanks for any help and especially explanations about AbstractControl and NgModel .. <div> <form (ngSubmit)="clicked ? onEditSubmit($event) : onRegisterSubmit($event)" [formGroup] = "form"> <div class="form-group"> <label>Full Name<

In my HTML page, I have two sets of Boolean based radio buttons: Labeled: "Yes" and "No" / Values: True and False respectively. I'm populating a full form from a PostgreSQL database table to allow the authenticated user to view the form with populated data and edit the populated fields including the radio buttons, then save the form which will save the data to the DB. All of the other text fields populate without issue; it's both collection of radio buttons I am having an issue with pre-checkmarking the radio buttons. The below does not pre-populate the checked on front end (but adds the