Commit Graph

103 Commits

Author SHA1 Message Date
Paul Gschwendtner 6315acae94 fix(forms): disabled input acceptance member not properly applied (#34502)
With 5cecd97493 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
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
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
Kara Erickson 9a37e827e2 Revert "feat(forms): formControlName also accepts a number (#30606)" (#32088)
This reverts commit a647298412.

PR Close #32088
2019-08-09 17:29:27 -07:00
cexbrayat a647298412 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-09 10:39:22 -07:00
Igor Minar 6ece7db37a build: TypeScript 3.5 upgrade (#31615)
https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes#typescript-35

PR Close #31615
2019-07-25 17:05:23 -07:00
Renan Montebelo a68b1a1894 feat(forms): clear (remove all) components from a FormArray (#28918)
This method is a more convenient and efficient way of removing all
components from a FormArray. Before it, we needed to loop the FormArray
removing each component until empty.

Resolves #18531

PR Close #28918
2019-03-07 19:52:49 -08:00
alsami 45bf911df8 feat(forms): add `markAllAsTouched()` to `AbstractControl` (#26812)
Add functionality to mark a control and its descendant controls as touched

Closes #19400

PR Close #26812
2019-01-18 10:12:21 -08:00
Alex Rickabaugh ac157170c8 feat(forms): export NumberValueAccessor & RangeValueAccessor directives (#27743)
@angular/forms declares several directives and a module which are not
exported from the package via the entrypoint, either intentionally or as a
historical accident.

Ivy's locality principle necessitates that directives used in user code be
importable from the package which defines them. This requires these forms
directives to be exported.

Several directives which define ControlValueAccessors are exported:

* NumberValueAccessor
* RangeValueAccessor

A few more directives and a module are exported privately (with a ɵ prefix):

* NgNoValidate
* NgSelectMultipleOption
* InternalFormsSharedModule

PR Close #27743
2019-01-08 16:36:18 -08:00
Fabian Wiles 1b0b36d143 fix(forms): match getError and hasError to get method signature (#20211)
Internally getError and hasError call the AbstractControl#get method which takes  `path: Array<string | number> | string` as input, since there are different ways to traverse the AbstractControl tree.
This change matches the method signitures of all methods that use this.

PR Close #20211
2019-01-03 10:16:06 -08:00
cexbrayat b0c75611d6 fix(forms): typed argument for FormBuilder group (#26985)
PR Close #26985
2018-12-07 09:30:07 -08:00
Lars Gyrup Brink Nielsen e9e804fb02 feat(forms): add updateOn option to FormBuilder (#24599)
PR Close #24599
2018-11-01 15:31:11 -07:00
Pete Bacon Darwin 982bc7f2aa docs: update forms with `@publicApi` tags (#26595)
PR Close #26595
2018-10-19 14:35:53 -07:00
Pete Bacon Darwin 7d39bc68fb docs(forms): move extended text to @usageNotes (#26039)
Headings are not allowed in the basic description block.

PR Close #26039
2018-09-24 09:11:02 -07:00
Alex Eagle cbbad1b791 refactor(ivy): pre-factor: set explicit type parameters for ModuleWithProviders (#25970)
Ivy depends on having the generic type token later when reading the ModuleWithProviders from a .d.ts file.

PR Close #25970
2018-09-18 13:28:44 -07:00
Alan 3ba5220839 refactor(forms): `ngForm` element selector has been deprecated in favor of `ng-form` (#23721)
This has been deprecated to keep selector consistent with other core Angular selectors.  As element selectors are in kebab-case.

 Now deprecated:
 ```
 <ngForm #myForm="ngForm">
 ```

 After:
 ```
 <ng-form #myForm="ngForm">
 ```

You can also choose to supress this warnings by providing a config for `FormsModule` during import:

```ts
imports: [
 FormsModule.withConfig({warnOnDeprecatedNgFormSelector: 'never'});
]

Closes: #23678

PR Close #23721
2018-08-02 08:34:43 -07:00
Alex Rickabaugh 60aeee7abf feat(ivy): selector side of ModuleWithProviders via type metadata (#24862)
Within an @NgModule it's common to include in the imports a call to
a ModuleWithProviders function, for example RouterModule.forRoot().
The old ngc compiler was able to handle this pattern because it had
global knowledge of metadata of not only the input compilation unit
but also all dependencies.

The ngtsc compiler for Ivy doesn't have this knowledge, so the
pattern of ModuleWithProviders functions is more difficult. ngtsc
must be able to determine which module is imported via the function
in order to expand the selector scope and properly tree-shake
directives and pipes.

This commit implements a solution to this problem, by adding a type
parameter to ModuleWithProviders through which the actual module
type can be passed between compilation units.

The provider side isn't a problem because the imports are always
copied directly to the ngInjectorDef.

PR Close #24862
2018-07-20 11:48:35 -07:00
Igor Minar e3064d5432 feat: typescript 2.9 support (#24652)
PR Close #24652
2018-07-03 13:32:06 -07:00
Pete Bacon Darwin 4b96a58c5a docs: remove all deprecated `@stable` jsdoc tags (#23210)
These are no longer needed as stable docs are computed as those that
do not have `@experimental` or `@deprecated` tags.

PR Close #23210
2018-04-10 21:49:32 -07:00
Kara Erickson 8fb34bcd43 refactor(forms): deprecate ngModel usage on same field as formControl (#22633)
Support for using the `ngModel` input property and `ngModelChange`
event with reactive form directives has been deprecated in
Angular v6 and will be removed in Angular v7.

Now deprecated:
```html
<input [formControl]="control" [(ngModel)]="value">
```

```ts
this.value = 'some value';
```

This has been deprecated for a few reasons. First, developers have
found this pattern confusing. It seems like the actual `ngModel`
directive is being used, but in fact it's an input/output property
named `ngModel` on the reactive form directive that simply approximates
(some of) its behavior. Specifically, it allows getting/setting the
value and intercepting value events. However, some of `ngModel`'s other
features - like delaying updates with`ngModelOptions` or exporting the
directive - simply don't work, which has understandably caused some
confusion.

In addition, this pattern mixes template-driven and reactive forms
strategies, which we generally don't recommend because it doesn't take
advantage of the full benefits of either strategy. Setting the value in
the template violates the template-agnostic principles behind reactive
forms, whereas adding a FormControl/FormGroup layer in the class removes
the convenience of defining forms in the template.

To update your code before v7, you'll want to decide whether to stick
with reactive form directives (and get/set values using reactive forms
patterns) or switch over to template-driven directives.

After (choice 1 - use reactive forms):

```html
<input [formControl]="control">
```

```ts
this.control.setValue('some value');
```

After (choice 2 - use template-driven forms):

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

```ts
this.value = 'some value';
```

You can also choose to silence this warning by providing a config for
`ReactiveFormsModule` at import time:

```ts
imports: [
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
```

Alternatively, you can choose to surface a separate warning for each
instance of this pattern with a config value of `"always"`. This may
help to track down where in the code the pattern is being used as the
code is being updated.

Note: `warnOnNgModelWithFormControl` is set up as deprecated so that it
can be removed in v7 when it is no longer needed. This will not display
properly in API docs yet because dgeni doesn't yet support deprecating
properties in object literals, but we have an open issue to resolve the
discrepancy here: https://github.com/angular/angular/issues/22640.

PR Close #22633
2018-03-07 20:47:53 -08:00
Fabian Wiles e86b64b620 feat(forms): allow markAsPending to emit events (#20212)
closes #17958

BREAKING CHANGE:
- `AbstractControl#statusChanges` now emits an event of `'PENDING'` when you call `AbstractControl#markAsPending`
- Previously it did not emit an event when you called `markAsPending`
- To migrate you would need to ensure that if you are filtering or checking events from `statusChanges` that you account for the new event when calling `markAsPending`

PR Close #20212
2018-02-22 11:15:33 -08:00
harunurhan 941e88ff79 feat(forms): multiple validators for array method (#20766)
Change array method signature so that array of validator and/or async
validatior functions can be passed.

Fixes #20665

PR Close #20766
2018-02-07 12:04:48 -08:00
Trotyl 2707012181 fix(forms): publish missing types (#19941)
PR Close #19941
2018-02-06 08:02:15 -08:00
Oussama Ben Brahim 170885c51b fix(forms): allow FormBuilder to create controls with any formState type (#20917)
Align formState type in FormBuilder#control with FormControl#constructor

Fixes #20368

PR Close #20917
2018-01-25 22:17:43 -08:00
Fabian Wiles d41d2c460a feat(forms): allow nulls on setAsyncValidators (#20327)
closes #20296

PR Close #20327
2017-12-07 13:34:12 -08:00
Victor Berchet 14e8e88022 Revert "refactor(core): Change `abstract get` to `readonly` (#19226)"
This reverts commit 3aa3d5c548.
2017-09-28 13:36:56 -07:00
tinayuangao 3aa3d5c548 refactor(core): Change `abstract get` to `readonly` (#19226) 2017-09-28 09:36:13 -07:00
Jason Aden 79c7fe05c6 build: update public api file names (#19190)
PR Close #19190
2017-09-19 16:59:18 -07:00
Jason Aden fd701b07f0 build: publish tree of files rather than FESMs (#18541)
* Remove now unnecessary portions of build.
* Add a compilePackageES5 method to build ES5 from sources
* Rework all package.json and rollup config files to new format
* Remove "extends" from tsconfig-build.json files and fixup compilation roots

PR Close #18541
2017-08-31 15:34:50 -07:00
Kara Erickson 0d45828460 feat(forms): add updateOn and ngFormOptions to NgForm
This commit introduces a new Input property called
`ngFormOptions` to the `NgForm` directive. You can use it
to set default `updateOn` values for all the form's child
controls. This default will be used unless the child has
already explicitly set its own `updateOn` value in
`ngModelOptions`.

Potential values: `change` | `blur` | `submit`

```html
<form [ngFormOptions]="{updateOn: blur}">
  <input name="one" ngModel>  <!-- will update on blur-->
</form>
```

For more context, see [#18577](https://github.com/angular/angular/pull/18577).
2017-08-16 15:25:34 -07:00
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
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
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
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
Victor Berchet 8c50457385 fix: public API golden files (#16414) 2017-04-28 09:48:15 -07: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