- * The model must always be of type `number` otherwise AngularJS will throw an error.
- * Be aware that a string containing a number is not enough. See the {@link ngModel:numfmt}
- * error docs for more information and an example of how to convert your model if necessary.
- *
- *
- *
- *
- * @knownIssue
- *
- * ### HTML5 constraint validation and `allowInvalid`
- *
- * In browsers that follow the
- * [HTML5 specification](https://html.spec.whatwg.org/multipage/forms.html#number-state-%28type=number%29),
- * `input[number]` does not work as expected with {@link ngModelOptions `ngModelOptions.allowInvalid`}.
- * If a non-number is entered in the input, the browser will report the value as an empty string,
- * which means the view / model values in `ngModel` and subsequently the scope value
- * will also be an empty string.
- *
- * @knownIssue
- *
- * ### Large numbers and `step` validation
- *
- * The `step` validation will not work correctly for very large numbers (e.g. 9999999999) due to
- * Javascript's arithmetic limitations. If you need to handle large numbers, purpose-built
- * libraries (e.g. https://github.com/MikeMcl/big.js/), can be included into AngularJS by
- * {@link guide/forms#modifying-built-in-validators overwriting the validators}
- * for `number` and / or `step`, or by {@link guide/forms#custom-validation applying custom validators}
- * to an `input[text]` element. The source for `input[number]` type can be used as a starting
- * point for both implementations.
- *
- * @param {string} ngModel Assignable AngularJS expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} min Sets the `min` validation error key if the value entered is less than `min`.
- * Can be interpolated.
- * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`.
- * Can be interpolated.
- * @param {string=} ngMin Like `min`, sets the `min` validation error key if the value entered is less than `ngMin`,
- * but does not trigger HTML5 native validation. Takes an expression.
- * @param {string=} ngMax Like `max`, sets the `max` validation error key if the value entered is greater than `ngMax`,
- * but does not trigger HTML5 native validation. Takes an expression.
- * @param {string=} step Sets the `step` validation error key if the value entered does not fit the `step` constraint.
- * Can be interpolated.
- * @param {string=} ngStep Like `step`, sets the `step` validation error key if the value entered does not fit the `ngStep` constraint,
- * but does not trigger HTML5 native validation. Takes an expression.
- * @param {string=} required Sets `required` validation error key if the value is not entered.
- * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
- * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
- * `required` when you want to data-bind to the `required` attribute.
- * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
- * minlength.
- * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
- * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of
- * any length.
- * @param {string=} pattern Similar to `ngPattern` except that the attribute value is the actual string
- * that contains the regular expression body that will be converted to a regular expression
- * as in the ngPattern directive.
- * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}
- * does not match a RegExp found by evaluating the AngularJS expression given in the attribute value.
- * If the expression evaluates to a RegExp object, then this is used directly.
- * If the expression evaluates to a string, then it will be converted to a RegExp
- * after wrapping it in `^` and `$` characters. For instance, `"abc"` will be converted to
- * `new RegExp('^abc$')`.
- * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to
- * start at the index of the last search's match, thus not taking the whole input value into
- * account.
- * @param {string=} ngChange AngularJS expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- var value = element(by.binding('example.value'));
- var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('example.value'));
-
- it('should initialize to model', function() {
- expect(value.getText()).toContain('12');
- expect(valid.getText()).toContain('true');
- });
-
- it('should be invalid if empty', function() {
- input.clear();
- input.sendKeys('');
- expect(value.getText()).toEqual('value =');
- expect(valid.getText()).toContain('false');
- });
-
- it('should be invalid if over max', function() {
- input.clear();
- input.sendKeys('123');
- expect(value.getText()).toEqual('value =');
- expect(valid.getText()).toContain('false');
- });
-
-
- */
- 'number': numberInputType,
-
-
- /**
- * @ngdoc input
- * @name input[url]
- *
- * @description
- * Text input with URL validation. Sets the `url` validation error key if the content is not a
- * valid URL.
- *
- *
- * **Note:** `input[url]` uses a regex to validate urls that is derived from the regex
- * used in Chromium. If you need stricter validation, you can use `ng-pattern` or modify
- * the built-in validators (see the {@link guide/forms Forms guide})
- *
- *
- * @param {string} ngModel Assignable AngularJS expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} required Sets `required` validation error key if the value is not entered.
- * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
- * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
- * `required` when you want to data-bind to the `required` attribute.
- * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
- * minlength.
- * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
- * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of
- * any length.
- * @param {string=} pattern Similar to `ngPattern` except that the attribute value is the actual string
- * that contains the regular expression body that will be converted to a regular expression
- * as in the ngPattern directive.
- * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}
- * does not match a RegExp found by evaluating the AngularJS expression given in the attribute value.
- * If the expression evaluates to a RegExp object, then this is used directly.
- * If the expression evaluates to a string, then it will be converted to a RegExp
- * after wrapping it in `^` and `$` characters. For instance, `"abc"` will be converted to
- * `new RegExp('^abc$')`.
- * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to
- * start at the index of the last search's match, thus not taking the whole input value into
- * account.
- * @param {string=} ngChange AngularJS expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- var text = element(by.binding('url.text'));
- var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('url.text'));
-
- it('should initialize to model', function() {
- expect(text.getText()).toContain('http://google.com');
- expect(valid.getText()).toContain('true');
- });
-
- it('should be invalid if empty', function() {
- input.clear();
- input.sendKeys('');
-
- expect(text.getText()).toEqual('text =');
- expect(valid.getText()).toContain('false');
- });
-
- it('should be invalid if not url', function() {
- input.clear();
- input.sendKeys('box');
-
- expect(valid.getText()).toContain('false');
- });
-
-
- */
- 'url': urlInputType,
-
-
- /**
- * @ngdoc input
- * @name input[email]
- *
- * @description
- * Text input with email validation. Sets the `email` validation error key if not a valid email
- * address.
- *
- *
- * **Note:** `input[email]` uses a regex to validate email addresses that is derived from the regex
- * used in Chromium, which may not fulfill your app's requirements.
- * If you need stricter (e.g. requiring a top-level domain), or more relaxed validation
- * (e.g. allowing IPv6 address literals) you can use `ng-pattern` or
- * modify the built-in validators (see the {@link guide/forms Forms guide}).
- *
- *
- * @param {string} ngModel Assignable AngularJS expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} required Sets `required` validation error key if the value is not entered.
- * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
- * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
- * `required` when you want to data-bind to the `required` attribute.
- * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
- * minlength.
- * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
- * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of
- * any length.
- * @param {string=} pattern Similar to `ngPattern` except that the attribute value is the actual string
- * that contains the regular expression body that will be converted to a regular expression
- * as in the ngPattern directive.
- * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}
- * does not match a RegExp found by evaluating the AngularJS expression given in the attribute value.
- * If the expression evaluates to a RegExp object, then this is used directly.
- * If the expression evaluates to a string, then it will be converted to a RegExp
- * after wrapping it in `^` and `$` characters. For instance, `"abc"` will be converted to
- * `new RegExp('^abc$')`.
- * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to
- * start at the index of the last search's match, thus not taking the whole input value into
- * account.
- * @param {string=} ngChange AngularJS expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- var text = element(by.binding('email.text'));
- var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('email.text'));
-
- it('should initialize to model', function() {
- expect(text.getText()).toContain('me@example.com');
- expect(valid.getText()).toContain('true');
- });
-
- it('should be invalid if empty', function() {
- input.clear();
- input.sendKeys('');
- expect(text.getText()).toEqual('text =');
- expect(valid.getText()).toContain('false');
- });
-
- it('should be invalid if not email', function() {
- input.clear();
- input.sendKeys('xxx');
-
- expect(valid.getText()).toContain('false');
- });
-
-
- */
- 'email': emailInputType,
-
-
- /**
- * @ngdoc input
- * @name input[radio]
- *
- * @description
- * HTML radio button.
- *
- * **Note:**
- * All inputs controlled by {@link ngModel ngModel} (including those of type `radio`) will use the
- * value of their `name` attribute to determine the property under which their
- * {@link ngModel.NgModelController NgModelController} will be published on the parent
- * {@link form.FormController FormController}. Thus, if you use the same `name` for multiple
- * inputs of a form (e.g. a group of radio inputs), only _one_ `NgModelController` will be
- * published on the parent `FormController` under that name. The rest of the controllers will
- * continue to work as expected, but you won't be able to access them as properties on the parent
- * `FormController`.
- *
- *
- *
- * In plain HTML forms, the `name` attribute is used to identify groups of radio inputs, so
- * that the browser can manage their state (checked/unchecked) based on the state of other
- * inputs in the same group.
- *
- *
- * In AngularJS forms, this is not necessary. The input's state will be updated based on the
- * value of the underlying model data.
- *
- *
- *
- *
- * If you omit the `name` attribute on a radio input, `ngModel` will automatically assign it a
- * unique name.
- *
- *
- * @param {string} ngModel Assignable AngularJS expression to data-bind to.
- * @param {string} value The value to which the `ngModel` expression should be set when selected.
- * Note that `value` only supports `string` values, i.e. the scope model needs to be a string,
- * too. Use `ngValue` if you need complex models (`number`, `object`, ...).
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} ngChange AngularJS expression to be executed when input changes due to user
- * interaction with the input element.
- * @param {string} ngValue AngularJS expression to which `ngModel` will be be set when the radio
- * is selected. Should be used instead of the `value` attribute if you need
- * a non-string `ngModel` (`boolean`, `array`, ...).
- *
- * @example
-
-
-
-
- Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
-
-
- it('should change state', function() {
- var inputs = element.all(by.model('color.name'));
- var color = element(by.binding('color.name'));
-
- expect(color.getText()).toContain('blue');
-
- inputs.get(0).click();
- expect(color.getText()).toContain('red');
-
- inputs.get(1).click();
- expect(color.getText()).toContain('green');
- });
-
-
- */
- 'radio': radioInputType,
-
- /**
- * @ngdoc input
- * @name input[range]
- *
- * @description
- * Native range input with validation and transformation.
- *
- * The model for the range input must always be a `Number`.
- *
- * IE9 and other browsers that do not support the `range` type fall back
- * to a text input without any default values for `min`, `max` and `step`. Model binding,
- * validation and number parsing are nevertheless supported.
- *
- * Browsers that support range (latest Chrome, Safari, Firefox, Edge) treat `input[range]`
- * in a way that never allows the input to hold an invalid value. That means:
- * - any non-numerical value is set to `(max + min) / 2`.
- * - any numerical value that is less than the current min val, or greater than the current max val
- * is set to the min / max val respectively.
- * - additionally, the current `step` is respected, so the nearest value that satisfies a step
- * is used.
- *
- * See the [HTML Spec on input[type=range]](https://www.w3.org/TR/html5/forms.html#range-state-(type=range))
- * for more info.
- *
- * This has the following consequences for AngularJS:
- *
- * Since the element value should always reflect the current model value, a range input
- * will set the bound ngModel expression to the value that the browser has set for the
- * input element. For example, in the following input ``,
- * if the application sets `model.value = null`, the browser will set the input to `'50'`.
- * AngularJS will then set the model to `50`, to prevent input and model value being out of sync.
- *
- * That means the model for range will immediately be set to `50` after `ngModel` has been
- * initialized. It also means a range input can never have the required error.
- *
- * This does not only affect changes to the model value, but also to the values of the `min`,
- * `max`, and `step` attributes. When these change in a way that will cause the browser to modify
- * the input value, AngularJS will also update the model value.
- *
- * Automatic value adjustment also means that a range input element can never have the `required`,
- * `min`, or `max` errors.
- *
- * However, `step` is currently only fully implemented by Firefox. Other browsers have problems
- * when the step value changes dynamically - they do not adjust the element value correctly, but
- * instead may set the `stepMismatch` error. If that's the case, the AngularJS will set the `step`
- * error on the input, and set the model to `undefined`.
- *
- * Note that `input[range]` is not compatible with`ngMax`, `ngMin`, and `ngStep`, because they do
- * not set the `min` and `max` attributes, which means that the browser won't automatically adjust
- * the input value based on their values, and will always assume min = 0, max = 100, and step = 1.
- *
- * @param {string} ngModel Assignable AngularJS expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} min Sets the `min` validation to ensure that the value entered is greater
- * than `min`. Can be interpolated.
- * @param {string=} max Sets the `max` validation to ensure that the value entered is less than `max`.
- * Can be interpolated.
- * @param {string=} step Sets the `step` validation to ensure that the value entered matches the `step`
- * Can be interpolated.
- * @param {expression=} ngChange AngularJS expression to be executed when the ngModel value changes due
- * to user interaction with the input element.
- * @param {expression=} ngChecked If the expression is truthy, then the `checked` attribute will be set on the
- * element. **Note** : `ngChecked` should not be used alongside `ngModel`.
- * Checkout {@link ng.directive:ngChecked ngChecked} for usage.
- *
- * @example
-
-
-
-
-
-
-
- * ## Range Input with ngMin & ngMax attributes
-
- * @example
-
-
-
-
-
-
-
- */
- 'range': rangeInputType,
-
- /**
- * @ngdoc input
- * @name input[checkbox]
- *
- * @description
- * HTML checkbox.
- *
- * @param {string} ngModel Assignable AngularJS expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {expression=} ngTrueValue The value to which the expression should be set when selected.
- * @param {expression=} ngFalseValue The value to which the expression should be set when not selected.
- * @param {string=} ngChange AngularJS expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- it('should change state', function() {
- var value1 = element(by.binding('checkboxModel.value1'));
- var value2 = element(by.binding('checkboxModel.value2'));
-
- expect(value1.getText()).toContain('true');
- expect(value2.getText()).toContain('YES');
-
- element(by.model('checkboxModel.value1')).click();
- element(by.model('checkboxModel.value2')).click();
-
- expect(value1.getText()).toContain('false');
- expect(value2.getText()).toContain('NO');
- });
-
-
- */
- 'checkbox': checkboxInputType,
-
- 'hidden': noop,
- 'button': noop,
- 'submit': noop,
- 'reset': noop,
- 'file': noop
-};
-
-function stringBasedInputType(ctrl) {
- ctrl.$formatters.push(function(value) {
- return ctrl.$isEmpty(value) ? value : value.toString();
- });
-}
-
-function textInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
- stringBasedInputType(ctrl);
-}
-
-function baseInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- var type = lowercase(element[0].type);
-
- // In composition mode, users are still inputting intermediate text buffer,
- // hold the listener until composition is done.
- // More about composition events: https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
- if (!$sniffer.android) {
- var composing = false;
-
- element.on('compositionstart', function() {
- composing = true;
- });
-
- // Support: IE9+
- element.on('compositionupdate', function(ev) {
- // End composition when ev.data is empty string on 'compositionupdate' event.
- // When the input de-focusses (e.g. by clicking away), IE triggers 'compositionupdate'
- // instead of 'compositionend'.
- if (isUndefined(ev.data) || ev.data === '') {
- composing = false;
- }
- });
-
- element.on('compositionend', function() {
- composing = false;
- listener();
- });
- }
-
- var timeout;
-
- var listener = function(ev) {
- if (timeout) {
- $browser.defer.cancel(timeout);
- timeout = null;
- }
- if (composing) return;
- var value = element.val(),
- event = ev && ev.type;
-
- // By default we will trim the value
- // If the attribute ng-trim exists we will avoid trimming
- // If input type is 'password', the value is never trimmed
- if (type !== 'password' && (!attr.ngTrim || attr.ngTrim !== 'false')) {
- value = trim(value);
- }
-
- // If a control is suffering from bad input (due to native validators), browsers discard its
- // value, so it may be necessary to revalidate (by calling $setViewValue again) even if the
- // control's value is the same empty value twice in a row.
- if (ctrl.$viewValue !== value || (value === '' && ctrl.$$hasNativeValidators)) {
- ctrl.$setViewValue(value, event);
- }
- };
-
- // if the browser does support "input" event, we are fine - except on IE9 which doesn't fire the
- // input event on backspace, delete or cut
- if ($sniffer.hasEvent('input')) {
- element.on('input', listener);
- } else {
- var deferListener = function(ev, input, origValue) {
- if (!timeout) {
- timeout = $browser.defer(function() {
- timeout = null;
- if (!input || input.value !== origValue) {
- listener(ev);
- }
- });
- }
- };
-
- element.on('keydown', /** @this */ function(event) {
- var key = event.keyCode;
-
- // ignore
- // command modifiers arrows
- if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;
-
- deferListener(event, this, this.value);
- });
-
- // if user modifies input value using context menu in IE, we need "paste", "cut" and "drop" events to catch it
- if ($sniffer.hasEvent('paste')) {
- element.on('paste cut drop', deferListener);
- }
- }
-
- // if user paste into input using mouse on older browser
- // or form autocomplete on newer browser, we need "change" event to catch it
- element.on('change', listener);
-
- // Some native input types (date-family) have the ability to change validity without
- // firing any input/change events.
- // For these event types, when native validators are present and the browser supports the type,
- // check for validity changes on various DOM events.
- if (PARTIAL_VALIDATION_TYPES[type] && ctrl.$$hasNativeValidators && type === attr.type) {
- element.on(PARTIAL_VALIDATION_EVENTS, /** @this */ function(ev) {
- if (!timeout) {
- var validity = this[VALIDITY_STATE_PROPERTY];
- var origBadInput = validity.badInput;
- var origTypeMismatch = validity.typeMismatch;
- timeout = $browser.defer(function() {
- timeout = null;
- if (validity.badInput !== origBadInput || validity.typeMismatch !== origTypeMismatch) {
- listener(ev);
- }
- });
- }
- });
- }
-
- ctrl.$render = function() {
- // Workaround for Firefox validation #12102.
- var value = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
- if (element.val() !== value) {
- element.val(value);
- }
- };
-}
-
-function weekParser(isoWeek, existingDate) {
- if (isDate(isoWeek)) {
- return isoWeek;
- }
-
- if (isString(isoWeek)) {
- WEEK_REGEXP.lastIndex = 0;
- var parts = WEEK_REGEXP.exec(isoWeek);
- if (parts) {
- var year = +parts[1],
- week = +parts[2],
- hours = 0,
- minutes = 0,
- seconds = 0,
- milliseconds = 0,
- firstThurs = getFirstThursdayOfYear(year),
- addDays = (week - 1) * 7;
-
- if (existingDate) {
- hours = existingDate.getHours();
- minutes = existingDate.getMinutes();
- seconds = existingDate.getSeconds();
- milliseconds = existingDate.getMilliseconds();
- }
-
- return new Date(year, 0, firstThurs.getDate() + addDays, hours, minutes, seconds, milliseconds);
- }
- }
-
- return NaN;
-}
-
-function createDateParser(regexp, mapping) {
- return function(iso, previousDate) {
- var parts, map;
-
- if (isDate(iso)) {
- return iso;
- }
-
- if (isString(iso)) {
- // When a date is JSON'ified to wraps itself inside of an extra
- // set of double quotes. This makes the date parsing code unable
- // to match the date string and parse it as a date.
- if (iso.charAt(0) === '"' && iso.charAt(iso.length - 1) === '"') {
- iso = iso.substring(1, iso.length - 1);
- }
- if (ISO_DATE_REGEXP.test(iso)) {
- return new Date(iso);
- }
- regexp.lastIndex = 0;
- parts = regexp.exec(iso);
-
- if (parts) {
- parts.shift();
- if (previousDate) {
- map = {
- yyyy: previousDate.getFullYear(),
- MM: previousDate.getMonth() + 1,
- dd: previousDate.getDate(),
- HH: previousDate.getHours(),
- mm: previousDate.getMinutes(),
- ss: previousDate.getSeconds(),
- sss: previousDate.getMilliseconds() / 1000
- };
- } else {
- map = { yyyy: 1970, MM: 1, dd: 1, HH: 0, mm: 0, ss: 0, sss: 0 };
- }
-
- forEach(parts, function(part, index) {
- if (index < mapping.length) {
- map[mapping[index]] = +part;
- }
- });
-
- var date = new Date(map.yyyy, map.MM - 1, map.dd, map.HH, map.mm, map.ss || 0, map.sss * 1000 || 0);
- if (map.yyyy < 100) {
- // In the constructor, 2-digit years map to 1900-1999.
- // Use `setFullYear()` to set the correct year.
- date.setFullYear(map.yyyy);
- }
-
- return date;
- }
- }
-
- return NaN;
- };
-}
-
-function createDateInputType(type, regexp, parseDate, format) {
- return function dynamicDateInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {
- badInputChecker(scope, element, attr, ctrl, type);
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
-
- var isTimeType = type === 'time' || type === 'datetimelocal';
- var previousDate;
- var previousTimezone;
-
- ctrl.$parsers.push(function(value) {
- if (ctrl.$isEmpty(value)) return null;
-
- if (regexp.test(value)) {
- // Note: We cannot read ctrl.$modelValue, as there might be a different
- // parser/formatter in the processing chain so that the model
- // contains some different data format!
- return parseDateAndConvertTimeZoneToLocal(value, previousDate);
- }
- ctrl.$$parserName = type;
- return undefined;
- });
-
- ctrl.$formatters.push(function(value) {
- if (value && !isDate(value)) {
- throw ngModelMinErr('datefmt', 'Expected `{0}` to be a date', value);
- }
- if (isValidDate(value)) {
- previousDate = value;
- var timezone = ctrl.$options.getOption('timezone');
-
- if (timezone) {
- previousTimezone = timezone;
- previousDate = convertTimezoneToLocal(previousDate, timezone, true);
- }
-
- return formatter(value, timezone);
- } else {
- previousDate = null;
- previousTimezone = null;
- return '';
- }
- });
-
- if (isDefined(attr.min) || attr.ngMin) {
- var minVal = attr.min || $parse(attr.ngMin)(scope);
- var parsedMinVal = parseObservedDateValue(minVal);
-
- ctrl.$validators.min = function(value) {
- return !isValidDate(value) || isUndefined(parsedMinVal) || parseDate(value) >= parsedMinVal;
- };
- attr.$observe('min', function(val) {
- if (val !== minVal) {
- parsedMinVal = parseObservedDateValue(val);
- minVal = val;
- ctrl.$validate();
- }
- });
- }
-
- if (isDefined(attr.max) || attr.ngMax) {
- var maxVal = attr.max || $parse(attr.ngMax)(scope);
- var parsedMaxVal = parseObservedDateValue(maxVal);
-
- ctrl.$validators.max = function(value) {
- return !isValidDate(value) || isUndefined(parsedMaxVal) || parseDate(value) <= parsedMaxVal;
- };
- attr.$observe('max', function(val) {
- if (val !== maxVal) {
- parsedMaxVal = parseObservedDateValue(val);
- maxVal = val;
- ctrl.$validate();
- }
- });
- }
-
- function isValidDate(value) {
- // Invalid Date: getTime() returns NaN
- return value && !(value.getTime && value.getTime() !== value.getTime());
- }
-
- function parseObservedDateValue(val) {
- return isDefined(val) && !isDate(val) ? parseDateAndConvertTimeZoneToLocal(val) || undefined : val;
- }
-
- function parseDateAndConvertTimeZoneToLocal(value, previousDate) {
- var timezone = ctrl.$options.getOption('timezone');
-
- if (previousTimezone && previousTimezone !== timezone) {
- // If the timezone has changed, adjust the previousDate to the default timezone
- // so that the new date is converted with the correct timezone offset
- previousDate = addDateMinutes(previousDate, timezoneToOffset(previousTimezone));
- }
-
- var parsedDate = parseDate(value, previousDate);
-
- if (!isNaN(parsedDate) && timezone) {
- parsedDate = convertTimezoneToLocal(parsedDate, timezone);
- }
- return parsedDate;
- }
-
- function formatter(value, timezone) {
- var targetFormat = format;
-
- if (isTimeType && isString(ctrl.$options.getOption('timeSecondsFormat'))) {
- targetFormat = format
- .replace('ss.sss', ctrl.$options.getOption('timeSecondsFormat'))
- .replace(/:$/, '');
- }
-
- var formatted = $filter('date')(value, targetFormat, timezone);
-
- if (isTimeType && ctrl.$options.getOption('timeStripZeroSeconds')) {
- formatted = formatted.replace(/(?::00)?(?:\.000)?$/, '');
- }
-
- return formatted;
- }
- };
-}
-
-function badInputChecker(scope, element, attr, ctrl, parserName) {
- var node = element[0];
- var nativeValidation = ctrl.$$hasNativeValidators = isObject(node.validity);
- if (nativeValidation) {
- ctrl.$parsers.push(function(value) {
- var validity = element.prop(VALIDITY_STATE_PROPERTY) || {};
- if (validity.badInput || validity.typeMismatch) {
- ctrl.$$parserName = parserName;
- return undefined;
- }
-
- return value;
- });
- }
-}
-
-function numberFormatterParser(ctrl) {
- ctrl.$parsers.push(function(value) {
- if (ctrl.$isEmpty(value)) return null;
- if (NUMBER_REGEXP.test(value)) return parseFloat(value);
-
- ctrl.$$parserName = 'number';
- return undefined;
- });
-
- ctrl.$formatters.push(function(value) {
- if (!ctrl.$isEmpty(value)) {
- if (!isNumber(value)) {
- throw ngModelMinErr('numfmt', 'Expected `{0}` to be a number', value);
- }
- value = value.toString();
- }
- return value;
- });
-}
-
-function parseNumberAttrVal(val) {
- if (isDefined(val) && !isNumber(val)) {
- val = parseFloat(val);
- }
- return !isNumberNaN(val) ? val : undefined;
-}
-
-function isNumberInteger(num) {
- // See http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript#14794066
- // (minus the assumption that `num` is a number)
-
- // eslint-disable-next-line no-bitwise
- return (num | 0) === num;
-}
-
-function countDecimals(num) {
- var numString = num.toString();
- var decimalSymbolIndex = numString.indexOf('.');
-
- if (decimalSymbolIndex === -1) {
- if (-1 < num && num < 1) {
- // It may be in the exponential notation format (`1e-X`)
- var match = /e-(\d+)$/.exec(numString);
-
- if (match) {
- return Number(match[1]);
- }
- }
-
- return 0;
- }
-
- return numString.length - decimalSymbolIndex - 1;
-}
-
-function isValidForStep(viewValue, stepBase, step) {
- // At this point `stepBase` and `step` are expected to be non-NaN values
- // and `viewValue` is expected to be a valid stringified number.
- var value = Number(viewValue);
-
- var isNonIntegerValue = !isNumberInteger(value);
- var isNonIntegerStepBase = !isNumberInteger(stepBase);
- var isNonIntegerStep = !isNumberInteger(step);
-
- // Due to limitations in Floating Point Arithmetic (e.g. `0.3 - 0.2 !== 0.1` or
- // `0.5 % 0.1 !== 0`), we need to convert all numbers to integers.
- if (isNonIntegerValue || isNonIntegerStepBase || isNonIntegerStep) {
- var valueDecimals = isNonIntegerValue ? countDecimals(value) : 0;
- var stepBaseDecimals = isNonIntegerStepBase ? countDecimals(stepBase) : 0;
- var stepDecimals = isNonIntegerStep ? countDecimals(step) : 0;
-
- var decimalCount = Math.max(valueDecimals, stepBaseDecimals, stepDecimals);
- var multiplier = Math.pow(10, decimalCount);
-
- value = value * multiplier;
- stepBase = stepBase * multiplier;
- step = step * multiplier;
-
- if (isNonIntegerValue) value = Math.round(value);
- if (isNonIntegerStepBase) stepBase = Math.round(stepBase);
- if (isNonIntegerStep) step = Math.round(step);
- }
-
- return (value - stepBase) % step === 0;
-}
-
-function numberInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {
- badInputChecker(scope, element, attr, ctrl, 'number');
- numberFormatterParser(ctrl);
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
-
- var parsedMinVal;
-
- if (isDefined(attr.min) || attr.ngMin) {
- var minVal = attr.min || $parse(attr.ngMin)(scope);
- parsedMinVal = parseNumberAttrVal(minVal);
-
- ctrl.$validators.min = function(modelValue, viewValue) {
- return ctrl.$isEmpty(viewValue) || isUndefined(parsedMinVal) || viewValue >= parsedMinVal;
- };
-
- attr.$observe('min', function(val) {
- if (val !== minVal) {
- parsedMinVal = parseNumberAttrVal(val);
- minVal = val;
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- }
- });
- }
-
- if (isDefined(attr.max) || attr.ngMax) {
- var maxVal = attr.max || $parse(attr.ngMax)(scope);
- var parsedMaxVal = parseNumberAttrVal(maxVal);
-
- ctrl.$validators.max = function(modelValue, viewValue) {
- return ctrl.$isEmpty(viewValue) || isUndefined(parsedMaxVal) || viewValue <= parsedMaxVal;
- };
-
- attr.$observe('max', function(val) {
- if (val !== maxVal) {
- parsedMaxVal = parseNumberAttrVal(val);
- maxVal = val;
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- }
- });
- }
-
- if (isDefined(attr.step) || attr.ngStep) {
- var stepVal = attr.step || $parse(attr.ngStep)(scope);
- var parsedStepVal = parseNumberAttrVal(stepVal);
-
- ctrl.$validators.step = function(modelValue, viewValue) {
- return ctrl.$isEmpty(viewValue) || isUndefined(parsedStepVal) ||
- isValidForStep(viewValue, parsedMinVal || 0, parsedStepVal);
- };
-
- attr.$observe('step', function(val) {
- // TODO(matsko): implement validateLater to reduce number of validations
- if (val !== stepVal) {
- parsedStepVal = parseNumberAttrVal(val);
- stepVal = val;
- ctrl.$validate();
- }
-
- });
-
- }
-}
-
-function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- badInputChecker(scope, element, attr, ctrl, 'range');
- numberFormatterParser(ctrl);
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
-
- var supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',
- minVal = supportsRange ? 0 : undefined,
- maxVal = supportsRange ? 100 : undefined,
- stepVal = supportsRange ? 1 : undefined,
- validity = element[0].validity,
- hasMinAttr = isDefined(attr.min),
- hasMaxAttr = isDefined(attr.max),
- hasStepAttr = isDefined(attr.step);
-
- var originalRender = ctrl.$render;
-
- ctrl.$render = supportsRange && isDefined(validity.rangeUnderflow) && isDefined(validity.rangeOverflow) ?
- //Browsers that implement range will set these values automatically, but reading the adjusted values after
- //$render would cause the min / max validators to be applied with the wrong value
- function rangeRender() {
- originalRender();
- ctrl.$setViewValue(element.val());
- } :
- originalRender;
-
- if (hasMinAttr) {
- minVal = parseNumberAttrVal(attr.min);
-
- ctrl.$validators.min = supportsRange ?
- // Since all browsers set the input to a valid value, we don't need to check validity
- function noopMinValidator() { return true; } :
- // non-support browsers validate the min val
- function minValidator(modelValue, viewValue) {
- return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;
- };
-
- setInitialValueAndObserver('min', minChange);
- }
-
- if (hasMaxAttr) {
- maxVal = parseNumberAttrVal(attr.max);
-
- ctrl.$validators.max = supportsRange ?
- // Since all browsers set the input to a valid value, we don't need to check validity
- function noopMaxValidator() { return true; } :
- // non-support browsers validate the max val
- function maxValidator(modelValue, viewValue) {
- return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;
- };
-
- setInitialValueAndObserver('max', maxChange);
- }
-
- if (hasStepAttr) {
- stepVal = parseNumberAttrVal(attr.step);
-
- ctrl.$validators.step = supportsRange ?
- function nativeStepValidator() {
- // Currently, only FF implements the spec on step change correctly (i.e. adjusting the
- // input element value to a valid value). It's possible that other browsers set the stepMismatch
- // validity error instead, so we can at least report an error in that case.
- return !validity.stepMismatch;
- } :
- // ngStep doesn't set the setp attr, so the browser doesn't adjust the input value as setting step would
- function stepValidator(modelValue, viewValue) {
- return ctrl.$isEmpty(viewValue) || isUndefined(stepVal) ||
- isValidForStep(viewValue, minVal || 0, stepVal);
- };
-
- setInitialValueAndObserver('step', stepChange);
- }
-
- function setInitialValueAndObserver(htmlAttrName, changeFn) {
- // interpolated attributes set the attribute value only after a digest, but we need the
- // attribute value when the input is first rendered, so that the browser can adjust the
- // input value based on the min/max value
- element.attr(htmlAttrName, attr[htmlAttrName]);
- var oldVal = attr[htmlAttrName];
- attr.$observe(htmlAttrName, function wrappedObserver(val) {
- if (val !== oldVal) {
- oldVal = val;
- changeFn(val);
- }
- });
- }
-
- function minChange(val) {
- minVal = parseNumberAttrVal(val);
- // ignore changes before model is initialized
- if (isNumberNaN(ctrl.$modelValue)) {
- return;
- }
-
- if (supportsRange) {
- var elVal = element.val();
- // IE11 doesn't set the el val correctly if the minVal is greater than the element value
- if (minVal > elVal) {
- elVal = minVal;
- element.val(elVal);
- }
- ctrl.$setViewValue(elVal);
- } else {
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- }
- }
-
- function maxChange(val) {
- maxVal = parseNumberAttrVal(val);
- // ignore changes before model is initialized
- if (isNumberNaN(ctrl.$modelValue)) {
- return;
- }
-
- if (supportsRange) {
- var elVal = element.val();
- // IE11 doesn't set the el val correctly if the maxVal is less than the element value
- if (maxVal < elVal) {
- element.val(maxVal);
- // IE11 and Chrome don't set the value to the minVal when max < min
- elVal = maxVal < minVal ? minVal : maxVal;
- }
- ctrl.$setViewValue(elVal);
- } else {
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- }
- }
-
- function stepChange(val) {
- stepVal = parseNumberAttrVal(val);
- // ignore changes before model is initialized
- if (isNumberNaN(ctrl.$modelValue)) {
- return;
- }
-
- // Some browsers don't adjust the input value correctly, but set the stepMismatch error
- if (!supportsRange) {
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- } else if (ctrl.$viewValue !== element.val()) {
- ctrl.$setViewValue(element.val());
- }
- }
-}
-
-function urlInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- // Note: no badInputChecker here by purpose as `url` is only a validation
- // in browsers, i.e. we can always read out input.value even if it is not valid!
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
- stringBasedInputType(ctrl);
-
- ctrl.$validators.url = function(modelValue, viewValue) {
- var value = modelValue || viewValue;
- return ctrl.$isEmpty(value) || URL_REGEXP.test(value);
- };
-}
-
-function emailInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- // Note: no badInputChecker here by purpose as `url` is only a validation
- // in browsers, i.e. we can always read out input.value even if it is not valid!
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
- stringBasedInputType(ctrl);
-
- ctrl.$validators.email = function(modelValue, viewValue) {
- var value = modelValue || viewValue;
- return ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value);
- };
-}
-
-function radioInputType(scope, element, attr, ctrl) {
- var doTrim = !attr.ngTrim || trim(attr.ngTrim) !== 'false';
- // make the name unique, if not defined
- if (isUndefined(attr.name)) {
- element.attr('name', nextUid());
- }
-
- var listener = function(ev) {
- var value;
- if (element[0].checked) {
- value = attr.value;
- if (doTrim) {
- value = trim(value);
- }
- ctrl.$setViewValue(value, ev && ev.type);
- }
- };
-
- element.on('change', listener);
-
- ctrl.$render = function() {
- var value = attr.value;
- if (doTrim) {
- value = trim(value);
- }
- element[0].checked = (value === ctrl.$viewValue);
- };
-
- attr.$observe('value', ctrl.$render);
-}
-
-function parseConstantExpr($parse, context, name, expression, fallback) {
- var parseFn;
- if (isDefined(expression)) {
- parseFn = $parse(expression);
- if (!parseFn.constant) {
- throw ngModelMinErr('constexpr', 'Expected constant expression for `{0}`, but saw ' +
- '`{1}`.', name, expression);
- }
- return parseFn(context);
- }
- return fallback;
-}
-
-function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {
- var trueValue = parseConstantExpr($parse, scope, 'ngTrueValue', attr.ngTrueValue, true);
- var falseValue = parseConstantExpr($parse, scope, 'ngFalseValue', attr.ngFalseValue, false);
-
- var listener = function(ev) {
- ctrl.$setViewValue(element[0].checked, ev && ev.type);
- };
-
- element.on('change', listener);
-
- ctrl.$render = function() {
- element[0].checked = ctrl.$viewValue;
- };
-
- // Override the standard `$isEmpty` because the $viewValue of an empty checkbox is always set to `false`
- // This is because of the parser below, which compares the `$modelValue` with `trueValue` to convert
- // it to a boolean.
- ctrl.$isEmpty = function(value) {
- return value === false;
- };
-
- ctrl.$formatters.push(function(value) {
- return equals(value, trueValue);
- });
-
- ctrl.$parsers.push(function(value) {
- return value ? trueValue : falseValue;
- });
-}
-
-
-/**
- * @ngdoc directive
- * @name textarea
- * @restrict E
- *
- * @description
- * HTML textarea element control with AngularJS data-binding. The data-binding and validation
- * properties of this element are exactly the same as those of the
- * {@link ng.directive:input input element}.
- *
- * @param {string} ngModel Assignable AngularJS expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} required Sets `required` validation error key if the value is not entered.
- * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
- * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
- * `required` when you want to data-bind to the `required` attribute.
- * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
- * minlength.
- * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
- * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of any
- * length.
- * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}
- * does not match a RegExp found by evaluating the AngularJS expression given in the attribute value.
- * If the expression evaluates to a RegExp object, then this is used directly.
- * If the expression evaluates to a string, then it will be converted to a RegExp
- * after wrapping it in `^` and `$` characters. For instance, `"abc"` will be converted to
- * `new RegExp('^abc$')`.
- * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to
- * start at the index of the last search's match, thus not taking the whole input value into
- * account.
- * @param {string=} ngChange AngularJS expression to be executed when input changes due to user
- * interaction with the input element.
- * @param {boolean=} [ngTrim=true] If set to false AngularJS will not automatically trim the input.
- *
- * @knownIssue
- *
- * When specifying the `placeholder` attribute of `
- *
{{ list | json }}
- *
- *
- * it("should split the text by newlines", function() {
- * var listInput = element(by.model('list'));
- * var output = element(by.binding('list | json'));
- * listInput.sendKeys('abc\ndef\nghi');
- * expect(output.getText()).toContain('[\n "abc",\n "def",\n "ghi"\n]');
- * });
- *
- *
- *
- */
-var ngListDirective = function() {
- return {
- restrict: 'A',
- priority: 100,
- require: 'ngModel',
- link: function(scope, element, attr, ctrl) {
- var ngList = attr.ngList || ', ';
- var trimValues = attr.ngTrim !== 'false';
- var separator = trimValues ? trim(ngList) : ngList;
-
- var parse = function(viewValue) {
- // If the viewValue is invalid (say required but empty) it will be `undefined`
- if (isUndefined(viewValue)) return;
-
- var list = [];
-
- if (viewValue) {
- forEach(viewValue.split(separator), function(value) {
- if (value) list.push(trimValues ? trim(value) : value);
- });
- }
-
- return list;
- };
-
- ctrl.$parsers.push(parse);
- ctrl.$formatters.push(function(value) {
- if (isArray(value)) {
- return value.join(ngList);
- }
-
- return undefined;
- });
-
- // Override the standard $isEmpty because an empty array means the input is empty.
- ctrl.$isEmpty = function(value) {
- return !value || !value.length;
- };
- }
- };
-};
-
-/* global VALID_CLASS: true,
- INVALID_CLASS: true,
- PRISTINE_CLASS: true,
- DIRTY_CLASS: true,
- UNTOUCHED_CLASS: true,
- TOUCHED_CLASS: true,
- PENDING_CLASS: true,
- addSetValidityMethod: true,
- setupValidity: true,
- defaultModelOptions: false
-*/
-
-
-var VALID_CLASS = 'ng-valid',
- INVALID_CLASS = 'ng-invalid',
- PRISTINE_CLASS = 'ng-pristine',
- DIRTY_CLASS = 'ng-dirty',
- UNTOUCHED_CLASS = 'ng-untouched',
- TOUCHED_CLASS = 'ng-touched',
- EMPTY_CLASS = 'ng-empty',
- NOT_EMPTY_CLASS = 'ng-not-empty';
-
-var ngModelMinErr = minErr('ngModel');
-
-/**
- * @ngdoc type
- * @name ngModel.NgModelController
- * @property {*} $viewValue The actual value from the control's view. For `input` elements, this is a
- * String. See {@link ngModel.NgModelController#$setViewValue} for information about when the $viewValue
- * is set.
- *
- * @property {*} $modelValue The value in the model that the control is bound to.
- *
- * @property {Array.} $parsers Array of functions to execute, as a pipeline, whenever
- * the control updates the ngModelController with a new {@link ngModel.NgModelController#$viewValue
- `$viewValue`} from the DOM, usually via user input.
- See {@link ngModel.NgModelController#$setViewValue `$setViewValue()`} for a detailed lifecycle explanation.
- Note that the `$parsers` are not called when the bound ngModel expression changes programmatically.
-
- The functions are called in array order, each passing
- its return value through to the next. The last return value is forwarded to the
- {@link ngModel.NgModelController#$validators `$validators`} collection.
-
- Parsers are used to sanitize / convert the {@link ngModel.NgModelController#$viewValue
- `$viewValue`}.
-
- Returning `undefined` from a parser means a parse error occurred. In that case,
- no {@link ngModel.NgModelController#$validators `$validators`} will run and the `ngModel`
- will be set to `undefined` unless {@link ngModelOptions `ngModelOptions.allowInvalid`}
- is set to `true`. The parse error is stored in `ngModel.$error.parse`.
-
- This simple example shows a parser that would convert text input value to lowercase:
- * ```js
- * function parse(value) {
- * if (value) {
- * return value.toLowerCase();
- * }
- * }
- * ngModelController.$parsers.push(parse);
- * ```
-
- *
- * @property {Array.} $formatters Array of functions to execute, as a pipeline, whenever
- the bound ngModel expression changes programmatically. The `$formatters` are not called when the
- value of the control is changed by user interaction.
-
- Formatters are used to format / convert the {@link ngModel.NgModelController#$modelValue
- `$modelValue`} for display in the control.
-
- The functions are called in reverse array order, each passing the value through to the
- next. The last return value is used as the actual DOM value.
-
- This simple example shows a formatter that would convert the model value to uppercase:
-
- * ```js
- * function format(value) {
- * if (value) {
- * return value.toUpperCase();
- * }
- * }
- * ngModel.$formatters.push(format);
- * ```
- *
- * @property {Object.} $validators A collection of validators that are applied
- * whenever the model value changes. The key value within the object refers to the name of the
- * validator while the function refers to the validation operation. The validation operation is
- * provided with the model value as an argument and must return a true or false value depending
- * on the response of that validation.
- *
- * ```js
- * ngModel.$validators.validCharacters = function(modelValue, viewValue) {
- * var value = modelValue || viewValue;
- * return /[0-9]+/.test(value) &&
- * /[a-z]+/.test(value) &&
- * /[A-Z]+/.test(value) &&
- * /\W+/.test(value);
- * };
- * ```
- *
- * @property {Object.} $asyncValidators A collection of validations that are expected to
- * perform an asynchronous validation (e.g. a HTTP request). The validation function that is provided
- * is expected to return a promise when it is run during the model validation process. Once the promise
- * is delivered then the validation status will be set to true when fulfilled and false when rejected.
- * When the asynchronous validators are triggered, each of the validators will run in parallel and the model
- * value will only be updated once all validators have been fulfilled. As long as an asynchronous validator
- * is unfulfilled, its key will be added to the controllers `$pending` property. Also, all asynchronous validators
- * will only run once all synchronous validators have passed.
- *
- * Please note that if $http is used then it is important that the server returns a success HTTP response code
- * in order to fulfill the validation and a status level of `4xx` in order to reject the validation.
- *
- * ```js
- * ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
- * var value = modelValue || viewValue;
- *
- * // Lookup user by username
- * return $http.get('/api/users/' + value).
- * then(function resolved() {
- * //username exists, this means validation fails
- * return $q.reject('exists');
- * }, function rejected() {
- * //username does not exist, therefore this validation passes
- * return true;
- * });
- * };
- * ```
- *
- * @property {Array.} $viewChangeListeners Array of functions to execute whenever
- * a change to {@link ngModel.NgModelController#$viewValue `$viewValue`} has caused a change
- * to {@link ngModel.NgModelController#$modelValue `$modelValue`}.
- * It is called with no arguments, and its return value is ignored.
- * This can be used in place of additional $watches against the model value.
- *
- * @property {Object} $error An object hash with all failing validator ids as keys.
- * @property {Object} $pending An object hash with all pending validator ids as keys.
- *
- * @property {boolean} $untouched True if control has not lost focus yet.
- * @property {boolean} $touched True if control has lost focus.
- * @property {boolean} $pristine True if user has not interacted with the control yet.
- * @property {boolean} $dirty True if user has already interacted with the control.
- * @property {boolean} $valid True if there is no error.
- * @property {boolean} $invalid True if at least one error on the control.
- * @property {string} $name The name attribute of the control.
- *
- * @description
- *
- * `NgModelController` provides API for the {@link ngModel `ngModel`} directive.
- * The controller contains services for data-binding, validation, CSS updates, and value formatting
- * and parsing. It purposefully does not contain any logic which deals with DOM rendering or
- * listening to DOM events.
- * Such DOM related logic should be provided by other directives which make use of
- * `NgModelController` for data-binding to control elements.
- * AngularJS provides this DOM logic for most {@link input `input`} elements.
- * At the end of this page you can find a {@link ngModel.NgModelController#custom-control-example
- * custom control example} that uses `ngModelController` to bind to `contenteditable` elements.
- *
- * @example
- * ### Custom Control Example
- * This example shows how to use `NgModelController` with a custom control to achieve
- * data-binding. Notice how different directives (`contenteditable`, `ng-model`, and `required`)
- * collaborate together to achieve the desired result.
- *
- * `contenteditable` is an HTML5 attribute, which tells the browser to let the element
- * contents be edited in place by the user.
- *
- * We are using the {@link ng.service:$sce $sce} service here and include the {@link ngSanitize $sanitize}
- * module to automatically remove "bad" content like inline event listener (e.g. ``).
- * However, as we are using `$sce` the model can still decide to provide unsafe content if it marks
- * that content using the `$sce` service.
- *
- *
-
- [contenteditable] {
- border: 1px solid black;
- background-color: white;
- min-height: 20px;
- }
-
- .ng-invalid {
- border: 1px solid red;
- }
-
-
-
- angular.module('customControl', ['ngSanitize']).
- directive('contenteditable', ['$sce', function($sce) {
- return {
- restrict: 'A', // only activate on element attribute
- require: '?ngModel', // get a hold of NgModelController
- link: function(scope, element, attrs, ngModel) {
- if (!ngModel) return; // do nothing if no ng-model
-
- // Specify how UI should be updated
- ngModel.$render = function() {
- element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
- };
-
- // Listen for change events to enable binding
- element.on('blur keyup change', function() {
- scope.$evalAsync(read);
- });
- read(); // initialize
-
- // Write data to the model
- function read() {
- var html = element.html();
- // When we clear the content editable the browser leaves a behind
- // If strip-br attribute is provided then we strip this out
- if (attrs.stripBr && html === ' ') {
- html = '';
- }
- ngModel.$setViewValue(html);
- }
- }
- };
- }]);
-
-
-
-
-
- it('should data-bind and become invalid', function() {
- if (browser.params.browser === 'safari' || browser.params.browser === 'firefox') {
- // SafariDriver can't handle contenteditable
- // and Firefox driver can't clear contenteditables very well
- return;
- }
- var contentEditable = element(by.css('[contenteditable]'));
- var content = 'Change me!';
-
- expect(contentEditable.getText()).toEqual(content);
-
- contentEditable.clear();
- contentEditable.sendKeys(protractor.Key.BACK_SPACE);
- expect(contentEditable.getText()).toEqual('');
- expect(contentEditable.getAttribute('class')).toMatch(/ng-invalid-required/);
- });
-
- *
- *
- *
- */
-NgModelController.$inject = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse', '$animate', '$timeout', '$q', '$interpolate'];
-function NgModelController($scope, $exceptionHandler, $attr, $element, $parse, $animate, $timeout, $q, $interpolate) {
- this.$viewValue = Number.NaN;
- this.$modelValue = Number.NaN;
- this.$$rawModelValue = undefined; // stores the parsed modelValue / model set from scope regardless of validity.
- this.$validators = {};
- this.$asyncValidators = {};
- this.$parsers = [];
- this.$formatters = [];
- this.$viewChangeListeners = [];
- this.$untouched = true;
- this.$touched = false;
- this.$pristine = true;
- this.$dirty = false;
- this.$valid = true;
- this.$invalid = false;
- this.$error = {}; // keep invalid keys here
- this.$$success = {}; // keep valid keys here
- this.$pending = undefined; // keep pending keys here
- this.$name = $interpolate($attr.name || '', false)($scope);
- this.$$parentForm = nullFormCtrl;
- this.$options = defaultModelOptions;
- this.$$updateEvents = '';
- // Attach the correct context to the event handler function for updateOn
- this.$$updateEventHandler = this.$$updateEventHandler.bind(this);
-
- this.$$parsedNgModel = $parse($attr.ngModel);
- this.$$parsedNgModelAssign = this.$$parsedNgModel.assign;
- this.$$ngModelGet = this.$$parsedNgModel;
- this.$$ngModelSet = this.$$parsedNgModelAssign;
- this.$$pendingDebounce = null;
- this.$$parserValid = undefined;
- this.$$parserName = 'parse';
-
- this.$$currentValidationRunId = 0;
-
- this.$$scope = $scope;
- this.$$rootScope = $scope.$root;
- this.$$attr = $attr;
- this.$$element = $element;
- this.$$animate = $animate;
- this.$$timeout = $timeout;
- this.$$parse = $parse;
- this.$$q = $q;
- this.$$exceptionHandler = $exceptionHandler;
-
- setupValidity(this);
- setupModelWatcher(this);
-}
-
-NgModelController.prototype = {
- $$initGetterSetters: function() {
- if (this.$options.getOption('getterSetter')) {
- var invokeModelGetter = this.$$parse(this.$$attr.ngModel + '()'),
- invokeModelSetter = this.$$parse(this.$$attr.ngModel + '($$$p)');
-
- this.$$ngModelGet = function($scope) {
- var modelValue = this.$$parsedNgModel($scope);
- if (isFunction(modelValue)) {
- modelValue = invokeModelGetter($scope);
- }
- return modelValue;
- };
- this.$$ngModelSet = function($scope, newValue) {
- if (isFunction(this.$$parsedNgModel($scope))) {
- invokeModelSetter($scope, {$$$p: newValue});
- } else {
- this.$$parsedNgModelAssign($scope, newValue);
- }
- };
- } else if (!this.$$parsedNgModel.assign) {
- throw ngModelMinErr('nonassign', 'Expression \'{0}\' is non-assignable. Element: {1}',
- this.$$attr.ngModel, startingTag(this.$$element));
- }
- },
-
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$render
- *
- * @description
- * Called when the view needs to be updated. It is expected that the user of the ng-model
- * directive will implement this method.
- *
- * The `$render()` method is invoked in the following situations:
- *
- * * `$rollbackViewValue()` is called. If we are rolling back the view value to the last
- * committed value then `$render()` is called to update the input control.
- * * The value referenced by `ng-model` is changed programmatically and both the `$modelValue` and
- * the `$viewValue` are different from last time.
- *
- * Since `ng-model` does not do a deep watch, `$render()` is only invoked if the values of
- * `$modelValue` and `$viewValue` are actually different from their previous values. If `$modelValue`
- * or `$viewValue` are objects (rather than a string or number) then `$render()` will not be
- * invoked if you only change a property on the objects.
- */
- $render: noop,
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$isEmpty
- *
- * @description
- * This is called when we need to determine if the value of an input is empty.
- *
- * For instance, the required directive does this to work out if the input has data or not.
- *
- * The default `$isEmpty` function checks whether the value is `undefined`, `''`, `null` or `NaN`.
- *
- * You can override this for input directives whose concept of being empty is different from the
- * default. The `checkboxInputType` directive does this because in its case a value of `false`
- * implies empty.
- *
- * @param {*} value The value of the input to check for emptiness.
- * @returns {boolean} True if `value` is "empty".
- */
- $isEmpty: function(value) {
- // eslint-disable-next-line no-self-compare
- return isUndefined(value) || value === '' || value === null || value !== value;
- },
-
- $$updateEmptyClasses: function(value) {
- if (this.$isEmpty(value)) {
- this.$$animate.removeClass(this.$$element, NOT_EMPTY_CLASS);
- this.$$animate.addClass(this.$$element, EMPTY_CLASS);
- } else {
- this.$$animate.removeClass(this.$$element, EMPTY_CLASS);
- this.$$animate.addClass(this.$$element, NOT_EMPTY_CLASS);
- }
- },
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$setPristine
- *
- * @description
- * Sets the control to its pristine state.
- *
- * This method can be called to remove the `ng-dirty` class and set the control to its pristine
- * state (`ng-pristine` class). A model is considered to be pristine when the control
- * has not been changed from when first compiled.
- */
- $setPristine: function() {
- this.$dirty = false;
- this.$pristine = true;
- this.$$animate.removeClass(this.$$element, DIRTY_CLASS);
- this.$$animate.addClass(this.$$element, PRISTINE_CLASS);
- },
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$setDirty
- *
- * @description
- * Sets the control to its dirty state.
- *
- * This method can be called to remove the `ng-pristine` class and set the control to its dirty
- * state (`ng-dirty` class). A model is considered to be dirty when the control has been changed
- * from when first compiled.
- */
- $setDirty: function() {
- this.$dirty = true;
- this.$pristine = false;
- this.$$animate.removeClass(this.$$element, PRISTINE_CLASS);
- this.$$animate.addClass(this.$$element, DIRTY_CLASS);
- this.$$parentForm.$setDirty();
- },
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$setUntouched
- *
- * @description
- * Sets the control to its untouched state.
- *
- * This method can be called to remove the `ng-touched` class and set the control to its
- * untouched state (`ng-untouched` class). Upon compilation, a model is set as untouched
- * by default, however this function can be used to restore that state if the model has
- * already been touched by the user.
- */
- $setUntouched: function() {
- this.$touched = false;
- this.$untouched = true;
- this.$$animate.setClass(this.$$element, UNTOUCHED_CLASS, TOUCHED_CLASS);
- },
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$setTouched
- *
- * @description
- * Sets the control to its touched state.
- *
- * This method can be called to remove the `ng-untouched` class and set the control to its
- * touched state (`ng-touched` class). A model is considered to be touched when the user has
- * first focused the control element and then shifted focus away from the control (blur event).
- */
- $setTouched: function() {
- this.$touched = true;
- this.$untouched = false;
- this.$$animate.setClass(this.$$element, TOUCHED_CLASS, UNTOUCHED_CLASS);
- },
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$rollbackViewValue
- *
- * @description
- * Cancel an update and reset the input element's value to prevent an update to the `$modelValue`,
- * which may be caused by a pending debounced event or because the input is waiting for some
- * future event.
- *
- * If you have an input that uses `ng-model-options` to set up debounced updates or updates that
- * depend on special events such as `blur`, there can be a period when the `$viewValue` is out of
- * sync with the ngModel's `$modelValue`.
- *
- * In this case, you can use `$rollbackViewValue()` to manually cancel the debounced / future update
- * and reset the input to the last committed view value.
- *
- * It is also possible that you run into difficulties if you try to update the ngModel's `$modelValue`
- * programmatically before these debounced/future events have resolved/occurred, because AngularJS's
- * dirty checking mechanism is not able to tell whether the model has actually changed or not.
- *
- * The `$rollbackViewValue()` method should be called before programmatically changing the model of an
- * input which may have such events pending. This is important in order to make sure that the
- * input field will be updated with the new model value and any pending operations are cancelled.
- *
- * @example
- *
- *
- * angular.module('cancel-update-example', [])
- *
- * .controller('CancelUpdateController', ['$scope', function($scope) {
- * $scope.model = {value1: '', value2: ''};
- *
- * $scope.setEmpty = function(e, value, rollback) {
- * if (e.keyCode === 27) {
- * e.preventDefault();
- * if (rollback) {
- * $scope.myForm[value].$rollbackViewValue();
- * }
- * $scope.model[value] = '';
- * }
- * };
- * }]);
- *
- *
- *
- *
Both of these inputs are only updated if they are blurred. Hitting escape should
- * empty them. Follow these steps and observe the difference:
- *
- *
Type something in the input. You will see that the model is not yet updated
- *
Press the Escape key.
- *
- *
In the first example, nothing happens, because the model is already '', and no
- * update is detected. If you blur the input, the model will be set to the current view.
- *
- *
In the second example, the pending update is cancelled, and the input is set back
- * to the last committed view value (''). Blurring the input does nothing.
- *
- *
- *
- *
- *
- *
- *
- *
-
- div {
- display: table-cell;
- }
- div:nth-child(1) {
- padding-right: 30px;
- }
-
-
- *
- */
- $rollbackViewValue: function() {
- this.$$timeout.cancel(this.$$pendingDebounce);
- this.$viewValue = this.$$lastCommittedViewValue;
- this.$render();
- },
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$validate
- *
- * @description
- * Runs each of the registered validators (first synchronous validators and then
- * asynchronous validators).
- * If the validity changes to invalid, the model will be set to `undefined`,
- * unless {@link ngModelOptions `ngModelOptions.allowInvalid`} is `true`.
- * If the validity changes to valid, it will set the model to the last available valid
- * `$modelValue`, i.e. either the last parsed value or the last value set from the scope.
- */
- $validate: function() {
-
- // ignore $validate before model is initialized
- if (isNumberNaN(this.$modelValue)) {
- return;
- }
-
- var viewValue = this.$$lastCommittedViewValue;
- // Note: we use the $$rawModelValue as $modelValue might have been
- // set to undefined during a view -> model update that found validation
- // errors. We can't parse the view here, since that could change
- // the model although neither viewValue nor the model on the scope changed
- var modelValue = this.$$rawModelValue;
-
- var prevValid = this.$valid;
- var prevModelValue = this.$modelValue;
-
- var allowInvalid = this.$options.getOption('allowInvalid');
-
- var that = this;
- this.$$runValidators(modelValue, viewValue, function(allValid) {
- // If there was no change in validity, don't update the model
- // This prevents changing an invalid modelValue to undefined
- if (!allowInvalid && prevValid !== allValid) {
- // Note: Don't check this.$valid here, as we could have
- // external validators (e.g. calculated on the server),
- // that just call $setValidity and need the model value
- // to calculate their validity.
- that.$modelValue = allValid ? modelValue : undefined;
-
- if (that.$modelValue !== prevModelValue) {
- that.$$writeModelToScope();
- }
- }
- });
- },
-
- $$runValidators: function(modelValue, viewValue, doneCallback) {
- this.$$currentValidationRunId++;
- var localValidationRunId = this.$$currentValidationRunId;
- var that = this;
-
- // check parser error
- if (!processParseErrors()) {
- validationDone(false);
- return;
- }
- if (!processSyncValidators()) {
- validationDone(false);
- return;
- }
- processAsyncValidators();
-
- function processParseErrors() {
- var errorKey = that.$$parserName;
-
- if (isUndefined(that.$$parserValid)) {
- setValidity(errorKey, null);
- } else {
- if (!that.$$parserValid) {
- forEach(that.$validators, function(v, name) {
- setValidity(name, null);
- });
- forEach(that.$asyncValidators, function(v, name) {
- setValidity(name, null);
- });
- }
-
- // Set the parse error last, to prevent unsetting it, should a $validators key == parserName
- setValidity(errorKey, that.$$parserValid);
- return that.$$parserValid;
- }
- return true;
- }
-
- function processSyncValidators() {
- var syncValidatorsValid = true;
- forEach(that.$validators, function(validator, name) {
- var result = Boolean(validator(modelValue, viewValue));
- syncValidatorsValid = syncValidatorsValid && result;
- setValidity(name, result);
- });
- if (!syncValidatorsValid) {
- forEach(that.$asyncValidators, function(v, name) {
- setValidity(name, null);
- });
- return false;
- }
- return true;
- }
-
- function processAsyncValidators() {
- var validatorPromises = [];
- var allValid = true;
- forEach(that.$asyncValidators, function(validator, name) {
- var promise = validator(modelValue, viewValue);
- if (!isPromiseLike(promise)) {
- throw ngModelMinErr('nopromise',
- 'Expected asynchronous validator to return a promise but got \'{0}\' instead.', promise);
- }
- setValidity(name, undefined);
- validatorPromises.push(promise.then(function() {
- setValidity(name, true);
- }, function() {
- allValid = false;
- setValidity(name, false);
- }));
- });
- if (!validatorPromises.length) {
- validationDone(true);
- } else {
- that.$$q.all(validatorPromises).then(function() {
- validationDone(allValid);
- }, noop);
- }
- }
-
- function setValidity(name, isValid) {
- if (localValidationRunId === that.$$currentValidationRunId) {
- that.$setValidity(name, isValid);
- }
- }
-
- function validationDone(allValid) {
- if (localValidationRunId === that.$$currentValidationRunId) {
-
- doneCallback(allValid);
- }
- }
- },
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$commitViewValue
- *
- * @description
- * Commit a pending update to the `$modelValue`.
- *
- * Updates may be pending by a debounced event or because the input is waiting for a some future
- * event defined in `ng-model-options`. this method is rarely needed as `NgModelController`
- * usually handles calling this in response to input events.
- */
- $commitViewValue: function() {
- var viewValue = this.$viewValue;
-
- this.$$timeout.cancel(this.$$pendingDebounce);
-
- // If the view value has not changed then we should just exit, except in the case where there is
- // a native validator on the element. In this case the validation state may have changed even though
- // the viewValue has stayed empty.
- if (this.$$lastCommittedViewValue === viewValue && (viewValue !== '' || !this.$$hasNativeValidators)) {
- return;
- }
- this.$$updateEmptyClasses(viewValue);
- this.$$lastCommittedViewValue = viewValue;
-
- // change to dirty
- if (this.$pristine) {
- this.$setDirty();
- }
- this.$$parseAndValidate();
- },
-
- $$parseAndValidate: function() {
- var viewValue = this.$$lastCommittedViewValue;
- var modelValue = viewValue;
- var that = this;
-
- this.$$parserValid = isUndefined(modelValue) ? undefined : true;
-
- // Reset any previous parse error
- this.$setValidity(this.$$parserName, null);
- this.$$parserName = 'parse';
-
- if (this.$$parserValid) {
- for (var i = 0; i < this.$parsers.length; i++) {
- modelValue = this.$parsers[i](modelValue);
- if (isUndefined(modelValue)) {
- this.$$parserValid = false;
- break;
- }
- }
- }
- if (isNumberNaN(this.$modelValue)) {
- // this.$modelValue has not been touched yet...
- this.$modelValue = this.$$ngModelGet(this.$$scope);
- }
- var prevModelValue = this.$modelValue;
- var allowInvalid = this.$options.getOption('allowInvalid');
- this.$$rawModelValue = modelValue;
-
- if (allowInvalid) {
- this.$modelValue = modelValue;
- writeToModelIfNeeded();
- }
-
- // Pass the $$lastCommittedViewValue here, because the cached viewValue might be out of date.
- // This can happen if e.g. $setViewValue is called from inside a parser
- this.$$runValidators(modelValue, this.$$lastCommittedViewValue, function(allValid) {
- if (!allowInvalid) {
- // Note: Don't check this.$valid here, as we could have
- // external validators (e.g. calculated on the server),
- // that just call $setValidity and need the model value
- // to calculate their validity.
- that.$modelValue = allValid ? modelValue : undefined;
- writeToModelIfNeeded();
- }
- });
-
- function writeToModelIfNeeded() {
- if (that.$modelValue !== prevModelValue) {
- that.$$writeModelToScope();
- }
- }
- },
-
- $$writeModelToScope: function() {
- this.$$ngModelSet(this.$$scope, this.$modelValue);
- forEach(this.$viewChangeListeners, function(listener) {
- try {
- listener();
- } catch (e) {
- // eslint-disable-next-line no-invalid-this
- this.$$exceptionHandler(e);
- }
- }, this);
- },
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$setViewValue
- *
- * @description
- * Update the view value.
- *
- * This method should be called when a control wants to change the view value; typically,
- * this is done from within a DOM event handler. For example, the {@link ng.directive:input input}
- * directive calls it when the value of the input changes and {@link ng.directive:select select}
- * calls it when an option is selected.
- *
- * When `$setViewValue` is called, the new `value` will be staged for committing through the `$parsers`
- * and `$validators` pipelines. If there are no special {@link ngModelOptions} specified then the staged
- * value is sent directly for processing through the `$parsers` pipeline. After this, the `$validators` and
- * `$asyncValidators` are called and the value is applied to `$modelValue`.
- * Finally, the value is set to the **expression** specified in the `ng-model` attribute and
- * all the registered change listeners, in the `$viewChangeListeners` list are called.
- *
- * In case the {@link ng.directive:ngModelOptions ngModelOptions} directive is used with `updateOn`
- * and the `default` trigger is not listed, all those actions will remain pending until one of the
- * `updateOn` events is triggered on the DOM element.
- * All these actions will be debounced if the {@link ng.directive:ngModelOptions ngModelOptions}
- * directive is used with a custom debounce for this particular event.
- * Note that a `$digest` is only triggered once the `updateOn` events are fired, or if `debounce`
- * is specified, once the timer runs out.
- *
- * When used with standard inputs, the view value will always be a string (which is in some cases
- * parsed into another type, such as a `Date` object for `input[date]`.)
- * However, custom controls might also pass objects to this method. In this case, we should make
- * a copy of the object before passing it to `$setViewValue`. This is because `ngModel` does not
- * perform a deep watch of objects, it only looks for a change of identity. If you only change
- * the property of the object then ngModel will not realize that the object has changed and
- * will not invoke the `$parsers` and `$validators` pipelines. For this reason, you should
- * not change properties of the copy once it has been passed to `$setViewValue`.
- * Otherwise you may cause the model value on the scope to change incorrectly.
- *
- *
- * In any case, the value passed to the method should always reflect the current value
- * of the control. For example, if you are calling `$setViewValue` for an input element,
- * you should pass the input DOM value. Otherwise, the control and the scope model become
- * out of sync. It's also important to note that `$setViewValue` does not call `$render` or change
- * the control's DOM value in any way. If we want to change the control's DOM value
- * programmatically, we should update the `ngModel` scope expression. Its new value will be
- * picked up by the model controller, which will run it through the `$formatters`, `$render` it
- * to update the DOM, and finally call `$validate` on it.
- *
- *
- * @param {*} value value from the view.
- * @param {string} trigger Event that triggered the update.
- */
- $setViewValue: function(value, trigger) {
- this.$viewValue = value;
- if (this.$options.getOption('updateOnDefault')) {
- this.$$debounceViewValueCommit(trigger);
- }
- },
-
- $$debounceViewValueCommit: function(trigger) {
- var debounceDelay = this.$options.getOption('debounce');
-
- if (isNumber(debounceDelay[trigger])) {
- debounceDelay = debounceDelay[trigger];
- } else if (isNumber(debounceDelay['default']) &&
- this.$options.getOption('updateOn').indexOf(trigger) === -1
- ) {
- debounceDelay = debounceDelay['default'];
- } else if (isNumber(debounceDelay['*'])) {
- debounceDelay = debounceDelay['*'];
- }
-
- this.$$timeout.cancel(this.$$pendingDebounce);
- var that = this;
- if (debounceDelay > 0) { // this fails if debounceDelay is an object
- this.$$pendingDebounce = this.$$timeout(function() {
- that.$commitViewValue();
- }, debounceDelay);
- } else if (this.$$rootScope.$$phase) {
- this.$commitViewValue();
- } else {
- this.$$scope.$apply(function() {
- that.$commitViewValue();
- });
- }
- },
-
- /**
- * @ngdoc method
- *
- * @name ngModel.NgModelController#$overrideModelOptions
- *
- * @description
- *
- * Override the current model options settings programmatically.
- *
- * The previous `ModelOptions` value will not be modified. Instead, a
- * new `ModelOptions` object will inherit from the previous one overriding
- * or inheriting settings that are defined in the given parameter.
- *
- * See {@link ngModelOptions} for information about what options can be specified
- * and how model option inheritance works.
- *
- *
- * **Note:** this function only affects the options set on the `ngModelController`,
- * and not the options on the {@link ngModelOptions} directive from which they might have been
- * obtained initially.
- *
- *
- *
- * **Note:** it is not possible to override the `getterSetter` option.
- *
- *
- * @param {Object} options a hash of settings to override the previous options
- *
- */
- $overrideModelOptions: function(options) {
- this.$options = this.$options.createChild(options);
- this.$$setUpdateOnEvents();
- },
-
- /**
- * @ngdoc method
- *
- * @name ngModel.NgModelController#$processModelValue
-
- * @description
- *
- * Runs the model -> view pipeline on the current
- * {@link ngModel.NgModelController#$modelValue $modelValue}.
- *
- * The following actions are performed by this method:
- *
- * - the `$modelValue` is run through the {@link ngModel.NgModelController#$formatters $formatters}
- * and the result is set to the {@link ngModel.NgModelController#$viewValue $viewValue}
- * - the `ng-empty` or `ng-not-empty` class is set on the element
- * - if the `$viewValue` has changed:
- * - {@link ngModel.NgModelController#$render $render} is called on the control
- * - the {@link ngModel.NgModelController#$validators $validators} are run and
- * the validation status is set.
- *
- * This method is called by ngModel internally when the bound scope value changes.
- * Application developers usually do not have to call this function themselves.
- *
- * This function can be used when the `$viewValue` or the rendered DOM value are not correctly
- * formatted and the `$modelValue` must be run through the `$formatters` again.
- *
- * @example
- * Consider a text input with an autocomplete list (for fruit), where the items are
- * objects with a name and an id.
- * A user enters `ap` and then selects `Apricot` from the list.
- * Based on this, the autocomplete widget will call `$setViewValue({name: 'Apricot', id: 443})`,
- * but the rendered value will still be `ap`.
- * The widget can then call `ctrl.$processModelValue()` to run the model -> view
- * pipeline again, which formats the object to the string `Apricot`,
- * then updates the `$viewValue`, and finally renders it in the DOM.
- *
- *
-
-
-
- *
- *
- */
- $processModelValue: function() {
- var viewValue = this.$$format();
-
- if (this.$viewValue !== viewValue) {
- this.$$updateEmptyClasses(viewValue);
- this.$viewValue = this.$$lastCommittedViewValue = viewValue;
- this.$render();
- // It is possible that model and view value have been updated during render
- this.$$runValidators(this.$modelValue, this.$viewValue, noop);
- }
- },
-
- /**
- * This method is called internally to run the $formatters on the $modelValue
- */
- $$format: function() {
- var formatters = this.$formatters,
- idx = formatters.length;
-
- var viewValue = this.$modelValue;
- while (idx--) {
- viewValue = formatters[idx](viewValue);
- }
-
- return viewValue;
- },
-
- /**
- * This method is called internally when the bound scope value changes.
- */
- $$setModelValue: function(modelValue) {
- this.$modelValue = this.$$rawModelValue = modelValue;
- this.$$parserValid = undefined;
- this.$processModelValue();
- },
-
- $$setUpdateOnEvents: function() {
- if (this.$$updateEvents) {
- this.$$element.off(this.$$updateEvents, this.$$updateEventHandler);
- }
-
- this.$$updateEvents = this.$options.getOption('updateOn');
- if (this.$$updateEvents) {
- this.$$element.on(this.$$updateEvents, this.$$updateEventHandler);
- }
- },
-
- $$updateEventHandler: function(ev) {
- this.$$debounceViewValueCommit(ev && ev.type);
- }
-};
-
-function setupModelWatcher(ctrl) {
- // model -> value
- // Note: we cannot use a normal scope.$watch as we want to detect the following:
- // 1. scope value is 'a'
- // 2. user enters 'b'
- // 3. ng-change kicks in and reverts scope value to 'a'
- // -> scope value did not change since the last digest as
- // ng-change executes in apply phase
- // 4. view should be changed back to 'a'
- ctrl.$$scope.$watch(function ngModelWatch(scope) {
- var modelValue = ctrl.$$ngModelGet(scope);
-
- // if scope model value and ngModel value are out of sync
- // This cannot be moved to the action function, because it would not catch the
- // case where the model is changed in the ngChange function or the model setter
- if (modelValue !== ctrl.$modelValue &&
- // checks for NaN is needed to allow setting the model to NaN when there's an asyncValidator
- // eslint-disable-next-line no-self-compare
- (ctrl.$modelValue === ctrl.$modelValue || modelValue === modelValue)
- ) {
- ctrl.$$setModelValue(modelValue);
- }
-
- return modelValue;
- });
-}
-
-/**
- * @ngdoc method
- * @name ngModel.NgModelController#$setValidity
- *
- * @description
- * Change the validity state, and notify the form.
- *
- * This method can be called within $parsers/$formatters or a custom validation implementation.
- * However, in most cases it should be sufficient to use the `ngModel.$validators` and
- * `ngModel.$asyncValidators` collections which will call `$setValidity` automatically.
- *
- * @param {string} validationErrorKey Name of the validator. The `validationErrorKey` will be assigned
- * to either `$error[validationErrorKey]` or `$pending[validationErrorKey]`
- * (for unfulfilled `$asyncValidators`), so that it is available for data-binding.
- * The `validationErrorKey` should be in camelCase and will get converted into dash-case
- * for class name. Example: `myError` will result in `ng-valid-my-error` and `ng-invalid-my-error`
- * classes and can be bound to as `{{ someForm.someControl.$error.myError }}`.
- * @param {boolean} isValid Whether the current state is valid (true), invalid (false), pending (undefined),
- * or skipped (null). Pending is used for unfulfilled `$asyncValidators`.
- * Skipped is used by AngularJS when validators do not run because of parse errors and
- * when `$asyncValidators` do not run because any of the `$validators` failed.
- */
-addSetValidityMethod({
- clazz: NgModelController,
- set: function(object, property) {
- object[property] = true;
- },
- unset: function(object, property) {
- delete object[property];
- }
-});
-
-
-/**
- * @ngdoc directive
- * @name ngModel
- * @restrict A
- * @priority 1
- * @param {expression} ngModel assignable {@link guide/expression Expression} to bind to.
- *
- * @description
- * The `ngModel` directive binds an `input`,`select`, `textarea` (or custom form control) to a
- * property on the scope using {@link ngModel.NgModelController NgModelController},
- * which is created and exposed by this directive.
- *
- * `ngModel` is responsible for:
- *
- * - Binding the view into the model, which other directives such as `input`, `textarea` or `select`
- * require.
- * - Providing validation behavior (i.e. required, number, email, url).
- * - Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
- * - Setting related css classes on the element (`ng-valid`, `ng-invalid`, `ng-dirty`, `ng-pristine`, `ng-touched`,
- * `ng-untouched`, `ng-empty`, `ng-not-empty`) including animations.
- * - Registering the control with its parent {@link ng.directive:form form}.
- *
- * Note: `ngModel` will try to bind to the property given by evaluating the expression on the
- * current scope. If the property doesn't already exist on this scope, it will be created
- * implicitly and added to the scope.
- *
- * For best practices on using `ngModel`, see:
- *
- * - [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes)
- *
- * For basic examples, how to use `ngModel`, see:
- *
- * - {@link ng.directive:input input}
- * - {@link input[text] text}
- * - {@link input[checkbox] checkbox}
- * - {@link input[radio] radio}
- * - {@link input[number] number}
- * - {@link input[email] email}
- * - {@link input[url] url}
- * - {@link input[date] date}
- * - {@link input[datetime-local] datetime-local}
- * - {@link input[time] time}
- * - {@link input[month] month}
- * - {@link input[week] week}
- * - {@link ng.directive:select select}
- * - {@link ng.directive:textarea textarea}
- *
- * ## Complex Models (objects or collections)
- *
- * By default, `ngModel` watches the model by reference, not value. This is important to know when
- * binding inputs to models that are objects (e.g. `Date`) or collections (e.g. arrays). If only properties of the
- * object or collection change, `ngModel` will not be notified and so the input will not be re-rendered.
- *
- * The model must be assigned an entirely new object or collection before a re-rendering will occur.
- *
- * Some directives have options that will cause them to use a custom `$watchCollection` on the model expression
- * - for example, `ngOptions` will do so when a `track by` clause is included in the comprehension expression or
- * if the select is given the `multiple` attribute.
- *
- * The `$watchCollection()` method only does a shallow comparison, meaning that changing properties deeper than the
- * first level of the object (or only changing the properties of an item in the collection if it's an array) will still
- * not trigger a re-rendering of the model.
- *
- * ## CSS classes
- * The following CSS classes are added and removed on the associated input/select/textarea element
- * depending on the validity of the model.
- *
- * - `ng-valid`: the model is valid
- * - `ng-invalid`: the model is invalid
- * - `ng-valid-[key]`: for each valid key added by `$setValidity`
- * - `ng-invalid-[key]`: for each invalid key added by `$setValidity`
- * - `ng-pristine`: the control hasn't been interacted with yet
- * - `ng-dirty`: the control has been interacted with
- * - `ng-touched`: the control has been blurred
- * - `ng-untouched`: the control hasn't been blurred
- * - `ng-pending`: any `$asyncValidators` are unfulfilled
- * - `ng-empty`: the view does not contain a value or the value is deemed "empty", as defined
- * by the {@link ngModel.NgModelController#$isEmpty} method
- * - `ng-not-empty`: the view contains a non-empty value
- *
- * Keep in mind that ngAnimate can detect each of these classes when added and removed.
- *
- * @animations
- * Animations within models are triggered when any of the associated CSS classes are added and removed
- * on the input element which is attached to the model. These classes include: `.ng-pristine`, `.ng-dirty`,
- * `.ng-invalid` and `.ng-valid` as well as any other validations that are performed on the model itself.
- * The animations that are triggered within ngModel are similar to how they work in ngClass and
- * animations can be hooked into using CSS transitions, keyframes as well as JS animations.
- *
- * The following example shows a simple way to utilize CSS transitions to style an input element
- * that has been rendered as invalid after it has been validated:
- *
- *
- * //be sure to include ngAnimate as a module to hook into more
- * //advanced animations
- * .my-input {
- * transition:0.5s linear all;
- * background: white;
- * }
- * .my-input.ng-invalid {
- * background: red;
- * color:white;
- * }
- *
- *
- * @example
- * ### Basic Usage
- *
-
-
-
-
- Update input to see transitions when valid/invalid.
- Integer is a valid value.
-
-
-
- *
- *
- * @example
- * ### Binding to a getter/setter
- *
- * Sometimes it's helpful to bind `ngModel` to a getter/setter function. A getter/setter is a
- * function that returns a representation of the model when called with zero arguments, and sets
- * the internal state of a model when called with an argument. It's sometimes useful to use this
- * for models that have an internal representation that's different from what the model exposes
- * to the view.
- *
- *
- * **Best Practice:** It's best to keep getters fast because AngularJS is likely to call them more
- * frequently than other parts of your code.
- *
- *
- * You use this behavior by adding `ng-model-options="{ getterSetter: true }"` to an element that
- * has `ng-model` attached to it. You can also add `ng-model-options="{ getterSetter: true }"` to
- * a `