123 Commits

Author SHA1 Message Date
Andrew Kushnir
e88a9c6350 perf(forms): make RadioControlRegistry class tree-shakable (#41126)
This commit makes the `RadioControlRegistry` class tree-shakable by adding the `providedIn` property to its
`@Injectable` decorator. Now if the radio buttons are not used in the app (thus no `RadioControlValueAccessor`
directive is initialized), the `RadioControlRegistry` should not be included into application's prod bundle.

PR Close #41126
2021-03-16 09:35:14 -07:00
Andrew Kushnir
3bd1992218 perf(forms): avoid direct references to the Validators class (#41189)
Currently the `Validators` class contains a number of static methods that represent different validators as well as some helper methods. Since class methods are not tree-shakable, any reference to the `Validator` class retains all of its methods (even if you've used just one).

This commit refactors the code to extract the logic into standalone functions and use these functions in the code instead of referencing them via `Validators` class. That should make the code more tree-shakable. The `Validators` class still retains its structure and calls these standalone methods internally to keep this change backwards-compatible.

PR Close #41189
2021-03-15 11:12:55 -07:00
Andrew Kushnir
937e90cd16 perf(forms): make built-in ControlValueAccessors more tree-shakable (#41146)
This commit updates Forms code to avoid direct references to all built-in ControlValueAccessor classes, which
prevents their tree-shaking from production builds. Instead, a new static property is added to all built-in
ControlValueAccessors, which is checked when we need to identify whether a given ControlValueAccessors is a
built-in one.

PR Close #41146
2021-03-12 15:54:59 -08:00
Andrew Kushnir
8a9fe49a2a fix(forms): properly handle the change to the FormGroup shape (#40829)
Currently the code in the `FormGroupDirective` assumes that the shape of the underlying `FormGroup` never
changes and `FormControl`s are not replaced with other types. In practice this is possible and Forms code
should be able to process such changes in FormGroup shape.

This commit adds extra check to the `FormGroupDirective` class to avoid applying FormControl-specific to
other types.

Fixes #13788.

PR Close #40829
2021-03-12 14:23:01 -08:00
David Shevitz
b4301c3d88 docs: add missing '@usageNotes' tag to documentation (#40909)
PR Close #40909
2021-02-19 09:09:43 -08:00
s4m0r4m4
12f7101d92 docs(forms): fix link for browser compatibility of using selects in IE (#40855)
Co-authored-by: Andrew Kushnir <43554145+AndrewKushnir@users.noreply.github.com>
PR Close #40855
2021-02-16 13:06:53 -08:00
s4m0r4m4
c56682783c docs(forms): remove reference to firefox bug that was fixed (#40855)
PR Close #40855
2021-02-16 13:06:53 -08:00
Sonu Kapoor
8fb83ea1b5 feat(forms): introduce min and max validators (#39063)
This commit adds the missing `min` and `max` validators.

BREAKING CHANGE:

Previously `min` and `max` attributes defined on the `<input type="number">`
were ignored by Forms module. Now presence of these attributes would
trigger min/max validation logic (in case `formControl`, `formControlName`
or `ngModel` directives are also present on a given input) and
corresponding form control status would reflect that.

Fixes #16352

PR Close #39063
2021-02-08 09:34:50 -08:00
Andrew Kushnir
72c0188e05 refactor(forms): avoid duplicated code in AbstractControlStatus directive (#40651)
This commit updates `AbstractControlStatus` directive code to remove duplicated logic in getters and replaces
that logic with a new function that accepts an argument.

PR Close #40651
2021-02-03 09:08:02 -08:00
Andrew Kushnir
4d66185cbc fix(forms): properly cleanup in cases when FormControlName has no CVA (#40526)
PR #39235 introduced additional cleanup logic for form controls and directives. The cleanup logic relies
on the presence of ControlValueAccessor instances on FormControlName and FormControl directives. In general
these fields are present and there are also checks to make sure that the mentioned directive instances are
created with CVAs. However some scenarios (primarily tests) may invoke the logic in a way that the directive
instance would not be fully initialized, thus causing CVA to be absent. As a result, the cleanup logic fails
while trying to call some methods on associated CVA instances.

This commit updates the cleanup logic to take into account the situation when CVA is not present.

Fixes #40521.

PR Close #40526
2021-01-25 11:41:14 -08:00
Alexey Elin
cf02cf1e18 docs: remove duplicated the (#40434)
PR Close #40434
2021-01-14 11:33:57 -08:00
Andrew Kushnir
fdbd3cae8a fix(forms): handle standalone <form> tag correctly in NgControlStatusGroup directive (#40344)
The `NgControlStatusGroup` directive is shared between template-driven and reactive form modules. In cases when
only reactive forms module is present, the `NgControlStatusGroup` directive is still activated on all `<form>`
elements, but if there is no other reactive directive applied (such as `formGroup`), corresponding `ControlContainer`
token is missing, thus causing exceptions (since `NgControlStatusGroup` directive relies on it to determine the
status). This commit updates the logic to handle the case when no `ControlContainer` is present (effectively making
directive logic a noop in this case).

Alternative approach (more risky) worth considering in the future is to split the `NgControlStatusGroup` into
2 directives with different set of selectors and include them into template-driven and reactive modules separately.
The downside is that these directives might be activated simultaneously on the same element (e.g. `<form>`),
effectively doing the work twice.

Resolves #38391.

PR Close #40344
2021-01-08 09:44:42 -08:00
Andrew Kushnir
a3849611b7 fix(forms): clean up connection between FormControl/FormGroup and corresponding directive instances (#39235)
Prior to this commit, removing `FormControlDirective` and `FormGroupName` directive instances didn't clear
the callbacks previously registered on FromControl/FormGroup class instances. As a result, these callbacks
were executed even after `FormControlDirective` and `FormGroupName` directive instances were destroyed. That was
also causing memory leaks since these callbacks also retained references to DOM elements.

This commit updates the cleanup logic to take care of properly detaching FormControl/FormGroup/FormArray instances
from the view by removing view-specific callback at destroy time.

Closes #20007, #37431, #39590.

PR Close #39235
2021-01-05 11:15:08 -08:00
arturovt
7954c8dfa3 perf(forms): use ngDevMode to tree-shake _ngModelWarning (#39964)
This commit adds `ngDevMode` guard to call `_ngModelWarning` only
in dev mode (similar to how things work in other parts of Ivy runtime code).
The `ngDevMode` flag helps to tree-shake this function from production builds
(since it will act as no-op, in dev mode everything will work as it works right now)
to decrease production bundle size.

PR Close #39964
2020-12-04 16:08:02 -08:00
Andrew Kushnir
1bc53eb303 fix(forms): more precise control cleanup (#39623)
Currently when an instance of the `FormControlName` directive is destroyed, the Forms package invokes
the `cleanUpControl` to clear all directive-specific logic (such as validators, onChange handlers,
etc) from a bound control. The logic of the `cleanUpControl` function should revert all setup
performed by the `setUpControl` function. However the `cleanUpControl` is too aggressive and removes
all callbacks related to the onChange and disabled state handling. This is causing problems when
a form control is bound to multiple FormControlName` directives, causing other instances of that
directive to stop working correctly when the first one is destroyed.

This commit updates the cleanup logic to only remove callbacks added while setting up a control
for a given directive instance.

The fix is needed to allow adding `cleanUpControl` function to other places where cleanup is needed
(missing this function calls in some other places causes memory leak issues).

PR Close #39623
2020-11-12 09:38:19 -08:00
Andrew Kushnir
e96b379385 fix(forms): remove validators while cleaning up a control (#39234)
Prior to this commit, the `cleanUpControl` function (responsible for cleaning up control instance)
was not taking validators into account. As a result, these validators remain registered on a detached
form control instance, thus causing memory leaks. This commit updates the `cleanUpControl` function
logic to also run validators cleanup.

As a part of this change, the logic to setup and cleanup validators was refactored and moved to
separate functions (with completely opposite behavior), so that they can be reused in the future.

This commit doesn't add the `cleanUpControl` calls to all possible places, it just fixes the cases
where this function is being called, but doesn't fully perform a cleanup. The `cleanUpControl`
function calls will be added to other parts of code (to avoid more memory leaks) in a followup PR.

PR Close #39234
2020-11-04 10:58:24 -08:00
Michael Ziluck
8af32fcb16 docs(forms): update ngModel documentation (#39481)
This commit improves the ngModel docs, specifically:
- clarifies purpose of the name attribute in ngModelOptions
- clarifies on the interaction with a parent form or lack thereof
- fix inconsistency with analogy for two-way binding
- cleans up some typos and extra wordiness
- clarifies language around common properties
- adds missing preposition to commit message format origins
PR Close #39481
2020-10-29 11:18:54 -07:00
Andrew Kushnir
0723331b2a refactor(forms): move common validators-related logic to the AbstractControlDirective class (#38280)
This commit refactors validators-related logic that is common across most of the directives.

A couple notes on this refactoring:
* common logic was moved to the `AbstractControlDirective` class (including `validator` and
`asyncValidator` getters)
* sync/async validators are now composed in `AbstractControlDirective` class eagerly when validators
are set with `_setValidators` and `_setAsyncValidators` calls and the result is stored in directive
instance (thus getters return cached versions of validator fn). This is needed to make sure composed
validator function remains the same (retains its identity) for a given directive instance, so that
this function can be added and later removed from an instance of an AbstractControl-based class
(like `FormControl`). Preserving validator function is required to perform proper cleanup (in followup
PRs) of the AbstractControl-based classes when a directive is destroyed.

PR Close #38280
2020-10-28 09:48:20 -07:00
Andrew Kushnir
1db4f212e5 docs: improve DefaultValueAccessor directive docs (#39404)
This commit improves the DefaultValueAccessor directive docs by:
- adding the `ngDefaultControl` as a search keyword to the description
- adding an example of the `ngDefaultControl` usage

Closes #35375.

PR Close #39404
2020-10-26 10:50:41 -07:00
Andrew Kushnir
246de9aaad fix(forms): improve types of directive constructor arguments (#38944)
Prior to this change, the `validators` and `asyncValidators` fields of a few Forms directives
were typed as `any[]`. This commit updates the types and makes them consistent for all directives
in the Forms package.

BREAKING CHANGE:

Directives in the `@angular/forms` package used to have `any[]` as a type of `validators` and
`asyncValidators` arguments in constructors. Now these arguments are properly typed, so if your
code relies on directive constructor types it may require some updates to improve type safety.

PR Close #38944
2020-10-06 10:14:21 -07:00
Ingo Bürk
2b1b7180db fix(forms): type NG_VALUE_ACCESSOR injection token as array (#29723)
NG_VALUE_ACCESSOR is a multi injection token, users can and
should expect more than one ControlValueAccessor to be
available (and this is how it is used in @angular/forms).

This is now reflected in the definition of the injection token
by typing it as an array of ControlValueAccessor. The motivating
reason is that using the programmatic Injector api will now
type Injector#get correspondingly.

fixes #29351

BREAKING CHANGES

NG_VALUE_ACCESSOR is now typed as a readonly array rather than
a mutable scalar. It is used as a multi injection token and as
such it should always be expected that more than one accessor
may be returned.

PR Close #29723
2020-09-21 12:26:07 -07:00
Andrew Kushnir
c0523fc3b4 docs(forms): exclude internal-only methods and properties from docs (#38583)
Prior to this commit, a lot of internal-only class properties and methods (such as `ngOnChanges`)
of the Forms package directives were exposed on angular.io website. These fields are not expected
to be called externally (they are used/invoked by framework only), since they are part of internal
implementations of the following interfaces:

* Angular lifecycle hook interfaces
* ControlValueAccessor interface
* Validator interface

Having these internal-only fields in docs creates unnecessary noise on directive detail pages.
This commit adds the `@nodoc` annotation to these properties and methods to keep fields in the
golden files, but hide them in docs.

PR Close #38583
2020-08-27 16:39:38 -07:00
Sonu Kapoor
201a546af8 perf(forms): use internal ngDevMode flag to tree-shake error messages in prod builds (#37821)
This commit adds a guard before throwing any forms errors. This will tree-shake
error messages which cannot be minified. It should also help to reduce the
bundle size of the `forms` package in production by ~20%.

Closes #37697

PR Close #37821
2020-08-24 09:26:28 -07:00
Andrew Kushnir
856db56cca refactor(forms): get rid of duplicate functions (#38371)
This commit performs minor refactoring in Forms package to get rid of duplicate functions.
It looks like the functions were duplicated due to a slightly different type signatures, but
their logic is completely identical. The logic in retained functions remains the same and now
these function also accept a generic type to achieve the same level of type safety.

PR Close #38371
2020-08-07 11:40:04 -07:00
Georgi K
a1c9f7cdb3 docs: fix typo in ng_control.ts (#38157)
PR Close #38157
2020-07-22 10:14:24 -07:00
danranVm
5fd2c8f2d6 refactor(forms): remove unnecessary ! operators from validators (#36805)
When we added the strict null checks, the lexer had some `!` operators added to prevent the compilation from failing.

See #24571

PR Close #36805
2020-07-14 11:01:53 -07:00
Sonu Kapoor
e36d5b201a fix(forms): correct usage of selectedOptions (#37620)
Previously, `registerOnChange` used `hasOwnProperty` to identify if the
property is supported. However, this does not work as the `selectedOptions`
property is an inherited property. This commit fixes this by verifying
the property on the prototype instead.

Closes #37433

PR Close #37620
2020-06-25 12:08:00 -07:00
Ajit Singh
a0595f4b4f fix(forms): change error message (#37643)
Error message mention that ngModel and ngModelChange will be removed in Angular v7 but right not now sure when it will be removed so changed it to a future version

PR Close #37643
2020-06-25 11:36:59 -07:00
Aamir Mukaram
62e4acc3d1 docs: fix typo in control_value_accessor.ts (#37057)
This commit updates the `ControlValueAccessor` class description in the `@angular/forms` package to fix a typo.

PR Close #37057
2020-06-12 15:11:11 -07:00
Andrew Scott
4456e7e4de refactor(core): remove looseIdentical in favor of built-in Object.is (#37191)
Remove `looseIdentical` implementation and instead use the ES2015 `Object.is` in its place.
They behave exactly the same way except for `+0`/`-0`.
`looseIdentical(+0, -0)` => `true`
`Object.is(+0, -0)` => `false`

Other than the difference noted above, this is not be a breaking change because:
1. `looseIdentical` is a private API
2. ES2015 is listed as a mandatory polyfill in the [browser support
guide](https://angular.io/guide/browser-support#mandatory-polyfills)
3. Also note that `Ivy` already uses `Object.is` in `bindingUpdated`.

PR Close #37191
2020-06-01 17:19:17 -04:00
Joey Perrott
d1ea1f4c7f build: update license headers to reference Google LLC (#37205)
Update the license headers throughout the repository to reference Google LLC
rather than Google Inc, for the required license headers.

PR Close #37205
2020-05-26 14:26:58 -04:00
Alan Agius
13ba84731f build: prepare for TypeScript 3.9 (#36989)
- Fix several compilation errors
- Update @microsoft/api-extractor to be compatible with TypeScript 3.9

PR Close #36989
2020-05-14 10:50:28 -07:00
Jan-Niklas W
198fc6f108 docs(forms): remove rxjs of alias import in form async validator example (#36856)
In the code example of the AsyncValidator example there was an aliased
import for the rxjs operator `of`. To align with the RxJS docs it should
just use a plain import of `of`

PR Close #36856
2020-05-12 10:50:39 -07:00
Tidi
97d6d909e7 fix(forms): number input fires valueChanges twice. (#36087)
Prior to this commit, number input fields would to fire valueChanges twice: once for `input` events when typing and second for the `change` event when the field lost focus (both events happen at once when using the increment and decrement buttons on the number field).

Fixes #12540

BREAKING CHANGE: Number inputs no longer listen to the `change` event.
* Tests which trigger `change` events need to be updated to trigger `input` events instead.
* The `change` event was in place to support IE9, as we found that `input` events were not fired with backspace or cut actions. If you need to maintain IE9 support, you will need to add a change event listener to number inputs and call the `onChange` method of `NumberValueAccessor` manually.
* Lastly, old versions of WebDriver would synthetically trigger the `change` event on `WebElement.clear` and `WebElement.sendKeys`. If you are using an old version of WebDriver, you may need to update tests to ensure `input` events are triggered. For example, you could use `element.sendKeys(Keys.chord(Keys.CONTROL, "a"), Keys.BACK_SPACE);` in place of `element.clear()`.

PR Close #12540

PR Close #36087
2020-05-07 10:20:26 -07:00
Paul Gschwendtner
e17fe90aaa refactor: fix undecorated classes with angular features in repo (#36921)
A few instances of undecorated classes with Angular features
have been discovered in the framework repo. This commit fixes
those.

PR Close #36921
2020-05-06 15:06:10 -07:00
Judy Bogart
0075017b43 docs: update reactive forms page (#35969)
PR Close #35969
2020-04-07 15:24:17 -07:00
Andrew Kushnir
7d0af179e3 style(forms): reformat of the forms package after clang update (#36466)
PR Close #36466
2020-04-07 09:47:09 -07:00
Kara Erickson
939e2f76f6 docs(forms): remove outdated ngForm selector deprecation notice (#35435)
In https://github.com/angular/angular/pull/33058, we removed support
for the `ngForm` selector in the NgForm directive. We deleted most
of the deprecation notices in that PR, but we missed a paragraph
of documentation in the API docs for NgForm.

This commit removes the outdated paragraph that makes it seem like
the selector is still around and deprecated (as opposed to removed),
as it might confuse users.

PR Close #35435
2020-02-14 15:34:00 -08:00
Francesco Leardini
9a55020286 docs: added description for novalidate form attribute. (#35166)
PR Close #35166
2020-02-10 16:11:58 -08:00
Igor Minar
76b77ec3c2 docs(forms): update the ngForm deprecation notice (#35263)
we should be documenting when an API is eligible for removal and not when it will be removed.

The actual removal depends on many factors, e.g. if we were able to automate the refactoring to
the recommended API in time or not.

PR Close #35263
2020-02-10 10:49:00 -08:00
cexbrayat
9ceee07d83 fix(forms): accept number length in length validators (#32057)
Both `MinLengthValidator` and `MaxLengthValidator` accepted only string inputs for the length required, which throws with Ivy and `fullTemplateTypeCheck` enabled:

    <!-- min = 2 in the component -->
    <input [minlength]="min">

with:

    Type 'number' is not assignable to type 'string | undefined'

This relaxes the accepted type to `string | number` to avoid breakage when developers switch to Ivy and fTTC.

PR Close #32057
2020-01-14 14:55:33 -08:00
Paul Gschwendtner
6315acae94 fix(forms): disabled input acceptance member not properly applied (#34502)
With 5cecd97493025cd940c9ade4ea9f1836d5b05cc8 we intended to expand
the input type of the `disabled` input of the `NgModel` directive.
Read more about the reason for this in the actual commit message.

Currently though, the acceptance coercion member does not have any
effect. This is because the acceptance member needs to refer to the
actual input property name, and not to the public input name.
`disabled` corresponds to the `isDisabled` property.

PR Close #34502
2020-01-09 15:12:09 -08:00
Paul Gschwendtner
5cecd97493 feat(forms): expand NgModel disabled type to work with strict template type checking (#34438)
NgModel internally coerces any arbitrary value that will assigned
to the `disabled` `@Input` to a boolean. This has been done to
support the common case where developers set the disabled attribute
without a value. For example:

```html
<input type="checkbox" [(ngModel)]="value" disabled>
```

This worked in View Engine without any errors because inputs were
not strictly checked. In Ivy though, developers can opt-in into
strict template type checking where the attribute would be flagged.

This is because the `NgModel#isDisabled` property type-wise only
accepts a `boolean`. To ensure that the common pattern described
above can still be used, and to reflect the actual runtime behavior,
we should add an acceptance member that makes it work without type
checking errors.

Using a coercion member means that this is not a breaking change.

PR Close #34438
2019-12-16 15:34:03 -08:00
Robin Dupret
602eeee7d6 docs(forms): Add a missing space (#33352)
PR Close #33352
2019-10-31 23:46:54 +00:00
Kara Erickson
383457f898 docs: clean up deprecation guide (#33338)
PR Close #33338
2019-10-23 09:11:13 -07:00
crisbeto
0b1daa9ebd refactor(forms): remove ngForm element selector (#33058)
Removes the deprecated `ngForm` element selector and all of the code related to it.

BREAKING CHANGES:
* `<ngForm></ngForm>` can no longer be used as a selector. Use `<ng-form></ng-form>` instead.
* The `NgFromSelectorWarning` directive has been removed.
* `FormsModule.withConfig` has been removed. Use the `FormsModule` directly.

PR Close #33058
2019-10-11 15:43:56 -07:00
LASLEDJ
fee28e20bb feat(forms): formGroupName and formArrayName also accepts a number (#32607)
For consistency, `FormGroupName` and `FormaArrayName` also accepts a
number as input's type like `FormControlName`

Closes https://github.com/angular/angular/issues/32436

PR Close #32607
2019-10-07 11:00:49 -07:00
lazarljubenovic
18798a1cb2 docs(forms): correct parameter names in jsdoc (#32530)
PR Close #32530
2019-09-09 15:55:42 -04:00
Misko Hevery
8a47b48912 refactor: Move dom_adapter.ts to @angular/common (#32154)
This work is needed in preparation for turning tokens into tree-shakable injectables.

PR Close #32154
2019-08-29 21:51:56 -07:00
cexbrayat
628b0c1154 feat(forms): formControlName also accepts a number (#30606)
This commit relaxes the type of the `formControlName` input to accept both a `string` and a `number`.

Currently, when using a `FormArray`, most templates look like:

```
<div formArrayName="tags">
  <div *ngFor="let tag of tagsArray.controls; index as i">
    <input [formControlName]="i">
  </div>
</div>
```

Here `formControlName` receives a number whereas its input type is a string.

This is fine for VE and `fullTemplateTypeCheck`, but not for Ivy which does a more thorough type checking on inputs with `fullTemplateTypeCheck` enabled and throws `Type 'number' is not assignable to type 'string'`. It is fixable by using `formControlName="{{i}}"` but you have to know the difference between `a="{{b}}"` and `[a]="b"` and change it all over the application codebase. This commit allows the existing code to still type-check.

PR Close #30606
2019-08-13 14:21:25 -07:00