Commit Graph

91 Commits

Author SHA1 Message Date
Kara Erickson 1cfa79ca4e feat(forms): add updateOn support to ngModelOptions
This commit introduces a new option to template-driven forms that
improves performance by delaying form control updates until the
"blur" or "submit" event.  To use it, set the `updateOn` property
in `ngModelOptions`.

```html
<input ngModel [ngModelOptions]="{updateOn: blur}">
```

Like in AngularJS, setting `updateOn` to `blur` or `submit` will
delay the update of the value as well as the validation status.
Updating value and validity together keeps the system easy to reason
about, as the two will always be in sync.  It's also worth noting
that the value/validation pipeline does still run when the form is
initialized (in order to support initial values).

Upcoming PRs will address:

* Support for setting group-level `updateOn` in template-driven forms
* Option for skipping initial validation run or more global error
display configuration
* Better support of reactive validation strategies

See more context in #18408, #18514, and the [design doc](https://docs.google.com/document/d/1dlJjRXYeuHRygryK0XoFrZNqW86jH4wobftCFyYa1PA/edit#heading=h.r6gn0i8f19wz).
2017-08-15 16:28:52 -07:00
Kara Erickson 5e840e1e79 docs(forms): add api docs for AbstractControlDirective 2017-08-15 15:03:12 -07:00
Fabian Wiles 233ef93e88 feat(forms): add status to `AbstractControlDirective` 2017-08-15 14:43:28 -07:00
Kara ff5c58be6b feat(forms): add default updateOn values for groups and arrays (#18536)
This commit adds support for setting default `updateOn` values
in `FormGroups` and `FormArrays`. If you set `updateOn` to
’blur’` at the group level, all child controls will default to `’blur’`,
unless the child has explicitly specified a different `updateOn` value.

```
const c = new FormGroup({
   one: new FormControl()
}, {updateOn: blur});
```

 It's worth noting that parent groups will always update their value and
validity immediately upon value/validity updates from children. In other
words, if a group is set to update on blur and its children are individually
set to update on change, the group will still update on change with its
children; its default value will simply not be used.
2017-08-09 15:41:53 -07:00
Miško Hevery fcadbf4bf6 perf: switch angular to use StaticInjector instead of ReflectiveInjector
This change allows ReflectiveInjector to be tree shaken resulting
in not needed Reflect polyfil and smaller bundles.

Code savings for HelloWorld using Closure:

Reflective: bundle.js:  105,864(34,190 gzip)
    Static: bundle.js:  154,889(33,555 gzip)
                            645( 2%)

BREAKING CHANGE:

`platformXXXX()` no longer accepts providers which depend on reflection.
Specifically the method signature when from `Provider[]` to
`StaticProvider[]`.

Example:
Before:
```
[
  MyClass,
  {provide: ClassA, useClass: SubClassA}
]

```

After:
```
[
  {provide: MyClass, deps: [Dep1,...]},
  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
]
```

NOTE: This only applies to platform creation and providers for the JIT
compiler. It does not apply to `@Compotent` or `@NgModule` provides
declarations.

Benchpress note: Previously Benchpress also supported reflective
provides, which now require static providers.

DEPRECATION:

- `ReflectiveInjector` is now deprecated as it will be remove. Use
  `Injector.create` as a replacement.

closes #18496
2017-08-07 15:42:34 -07:00
Kara f69561b2de feat(forms): add updateOn submit option to FormControls (#18514) 2017-08-07 15:39:25 -07:00
Kara Erickson 939dc44391 docs(forms): update and re-organize validation guide 2017-08-03 13:56:53 -07:00
Kara 333a708bb6 feat(forms): add updateOn blur option to FormControls (#18408)
By default, the value and validation status of a `FormControl` updates
whenever its value changes. If an application has heavy validation
requirements, updating on every text change can sometimes be too expensive.

This commit introduces a new option that improves performance by delaying
form control updates until the "blur" event.  To use it, set the `updateOn`
option to `blur` when instantiating the `FormControl`.

```ts
// example without validators
const c = new FormControl(, { updateOn: blur });

// example with validators
const c= new FormControl(, {
   validators: Validators.required,
   updateOn: blur
});
```

Like in AngularJS, setting `updateOn` to `blur` will delay the update of
the value as well as the validation status. Updating value and validity
together keeps the system easy to reason about, as the two will always be
in sync. It's  also worth noting that the value/validation pipeline does
still run when the form is initialized (in order to support initial values).

Closes #7113
2017-08-02 18:10:10 -07:00
Chuck Jazdzewski 5f501c722b refactor(forms): compile forms cleanly with TypeScript 2.4 (#18462) 2017-08-02 16:29:31 -07:00
Victor Berchet 9479a106bb build: enable TSLint on the packages folder 2017-07-31 15:47:57 -07:00
Kara Erickson ebef5e697a feat(forms): add options arg to abstract controls
FormControls, FormGroups, and FormArrays now optionally accept an options
object as their second argument. Validators and async validators can be
passed in as part of this options object (though they can still be passed
in as the second and third arg as before).

```ts
const c = new FormControl(, {
   validators: [Validators.required],
   asyncValidators: [myAsyncValidator]
});
```

This commit also adds support for passing arrays of validators and async
validators to FormGroups and FormArrays, which formerly only accepted
individual functions.

```ts
const g = new FormGroup({
   one: new FormControl()
}, [myPasswordValidator, myOtherValidator]);
```

This change paves the way for adding more options to AbstractControls,
such as more fine-grained control of validation timing.
2017-07-31 11:29:32 -07:00
Kara Erickson fae47d86b3 refactor(forms): move value accessor tests into own spec (#18356)
PR Close #18356
2017-07-26 17:55:37 -05:00
Pawel Kozlowski 43c187b624 refactor(forms): remove usage of deprecated Renderer 2017-06-23 16:12:52 -07:00
Alex Rickabaugh c59c390cdc fix: argument destructuring sometimes breaks strictNullChecks
Destructuring of the form:

function foo({a, b}: {a?, b?} = {})

breaks strictNullChecks, due to the TypeScript bug https://github.com/microsoft/typescript/issues/10078.
This change eliminates usage of destructuring in function argument lists in cases where it would leak
into the public API .d.ts.
2017-06-20 12:56:08 -07:00
Hans Larsen 3e685f98c6 fix(forms): roll back breaking change with min/max directives
With 4.2, we introduced the min and max validator directives. This was actually a breaking change because their selectors could include custom value accessors using the min/max properties for their own purposes.

For now, we are rolling back the change by removing the exports. At the least, we should wait to add them until a major version. In the meantime, we will have further discussion about what the best solution is going forward for all validator directives.

Closes #17491.

----

PR #17551 tried to roll this back, but did not remove the dead code. This failed internal tests that were checking that all declared directives were used.
This PR rolls back the original PR and commit the same as #17551 while also removing the dead code.
2017-06-20 09:04:50 -07:00
Hans Larsen 6c8e7dd63e revert: fix(forms): temp roll back breaking change with min/max directives
This reverts commit 232bd9395d.
2017-06-20 09:04:50 -07:00
Kara Erickson 232bd9395d fix(forms): temp roll back breaking change with min/max directives
With 4.2, we introduced the min and max validator directives. This was actually a breaking change because
their selectors could include custom value accessors using the min/max properties for their own purposes.

For now, we are rolling back the change by removing the exports.

Closes #17491.
2017-06-16 09:20:04 -07:00
Kara Erickson a222c3e609 fix(forms): fix min and max validator behavior on non-numbers 2017-06-08 13:59:17 -07:00
Jason Aden fa809ec8cf build: import tslib rather than output TS helpers (#16901) 2017-05-23 14:01:39 -06:00
Pete Bacon Darwin d0e72a8f8f docs(*) fix dangling links in API docs (#16632)
* docs(animations): fix links to `Component` animations

* docs(core): fix links to `ReflectiveInjector` methods

The `resolve` and other methods were moved from the
`Injector` to the `ReflectiveInjector`.

* docs(core): fix links to `Renderer`

The local links were assuming that that methods were on the
current document (e.g. `RootRenderer`), but they are actually
on the `Renderer` class.

* docs(router): fix links to methods

* docs(forms): fix links to methods

* docs(core): fix links to methods

* docs(router): fix API page links and an internal link
2017-05-09 15:51:37 -07:00
Igor Minar 71f5b73296 docs: fix links in api docs 2017-05-03 09:22:32 +01:00
Miško Hevery 8c09d10ba9 fix: strictNullCheck support. (#16389) (#16389)
Fix #16357

Workaround for https://github.com/Microsoft/TypeScript/issues/10078

Closes #16389

PR Close #16389
2017-04-28 09:15:00 -05:00
Toxicable 81925fa66d feat(forms): introduce min and max validators (#15813)
PR Close #15813
2017-04-27 17:39:17 -05:00
Miško Hevery 57bc245cb4 fix(forms): Update types for TypeScript nullability support
This reverts commit 6d930d2fc5.
2017-04-18 12:07:33 -07:00
Tobias Bosch 6d930d2fc5 Revert "fix(forms): Update types for TypeScript nullability support"
This reverts commit 6649743a2d.

Broke in G3.
2017-04-17 09:56:09 -07:00
Miško Hevery 6649743a2d fix(forms): Update types for TypeScript nullability support
This reverts commit 2e47a0d19f.
2017-04-14 15:10:26 -07:00
Tobias Bosch 2e47a0d19f Revert "fix(forms): Update types for TypeScript nullability support (#15859)" (#15977)
This reverts commit 6a2e08d0a8.
2017-04-13 18:03:42 -07:00
Miško Hevery 6a2e08d0a8 fix(forms): Update types for TypeScript nullability support (#15859) 2017-04-13 17:14:08 -07:00
Dzmitry Shylovich c17b912eb9 refactor: use object spread operator rather than merge (#15426) 2017-03-24 14:45:33 -07:00
Josep Sayol 9319b5f329 docs(common): update ngFor docs to new `as` syntax (#15166) 2017-03-22 17:18:22 -07:00
Kara Erickson 5efc86069f fix(forms): make composition event buffering configurable (#15256)
This commit fixes a regression where `ngModel` no longer syncs
letter by letter on Android devices, and instead syncs at the
end of every word. This broke when we introduced buffering of
IME events so IMEs like Pinyin keyboards or Katakana keyboards
wouldn't display composition strings. Unfortunately, iOS devices
and Android devices have opposite event behavior. Whereas iOS
devices fire composition events for IME keyboards only, Android
fires composition events for Latin-language keyboards. For
this reason, languages like English don't work as expected on
Android if we always buffer. So to support both platforms,
composition string buffering will only be turned on by default
for non-Android devices.

However, we have also added a `COMPOSITION_BUFFER_MODE` token
to make this configurable by the application. In some cases, apps
might might still want to receive intermediate values. For example,
some inputs begin searching based on Latin letters before a
character selection is made.

As a provider, this is fairly flexible. If you want to turn
composition buffering off, simply provide the token at the top
level:

```ts
providers: [
   {provide: COMPOSITION_BUFFER_MODE, useValue: false}
]
```

Or, if you want to change the mode  based on locale or platform,
you can use a factory:

```ts
import {shouldUseBuffering} from 'my/lib';

....
providers: [
   {provide: COMPOSITION_BUFFER_MODE, useFactory: shouldUseBuffering}
]
```

Closes #15079.

PR Close #15256
2017-03-21 16:47:18 -05:00
Filipe Silva f634c62cb3 test: add systemjs+umd integration test (#14196)
This test ensures the `__esModule` is set on UMD bundles, thus making them compatible with SystemJS@^0.22.3.

Followup from https://github.com/frankwallis/plugin-typescript/issues/185.

PR Close #14196
2017-03-19 12:23:07 -05:00
Dzmitry Shylovich 5486e5417b feat(forms): allow to compile forms in strictNullChecks mode (#14679)
Closes #14667

PR Close #14679
2017-03-17 13:47:12 -05:00
Jason Aden 410aa33005 build: fix paths to typings files so tsickle resolves imports correctly
Fixes #15080
2017-03-16 17:34:29 -07:00
Kara 26d4ce29e8 fix(forms): ensure observable validators are properly canceled (#15132)
Observable subscriptions from previous validation runs should be canceled
before a new subscription is created for the next validation run.
Currently the subscription that sets the errors is canceled properly,
but the source observable created by the validator is not. While this
does not affect validation status or error setting, the source
observables will incorrectly continue through the pipeline until they
complete. This change ensures that the whole stream is canceled.

AsyncValidatorFn previously had an "any" return type, but now it more
explicitly requires a Promise or Observable return type. We don't
anticipate this causing problems given that any other return type
would have caused a runtime error already.
2017-03-16 10:15:17 -07:00
Kara 778f7d6f33 fix(forms): remove equalsTo validator (#15050)
This API was introduced only in a beta release, and is being removed because we found it to be incorrect prior to launch. For more information about why this is being removed, see https://github.com/angular/angular/pull/15050.
2017-03-14 15:37:51 -07:00
Jason Aden da8ea350b2 refactor: More generic build.sh file 2017-03-08 16:29:28 -08:00
Jason Aden 58dd4673cd refactor: remove babel config files 2017-03-08 16:29:28 -08:00
Jason Aden 72563b61fb build: fix rollup config file paths 2017-03-08 16:29:28 -08:00
Jason Aden 8573e36574 build: fix file paths after moving modules/@angular/* to packages/* 2017-03-08 16:29:28 -08:00
Jason Aden 3e51a19983 refactor: move angular source to /packages rather than modules/@angular 2017-03-08 16:29:27 -08:00