iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(forms): reformat of the `forms` package after clang update (#36466) 

PR Close #36466
This commit is contained in:
Andrew Kushnir 2020-04-06 15:44:00 -07:00 committed by Kara Erickson
parent 416c786774
commit 7d0af179e3
37 changed files with 5410 additions and 5093 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/forms/src/directives/abstract_control_directive.ts
View File

@ -31,7 +31,9 @@ export abstract class AbstractControlDirective {
* @description
* Reports the value of the control if it is present, otherwise null.
*/
get value(): any { return this.control ? this.control.value : null; }
get value(): any {
return this.control ? this.control.value : null;
}
/**
* @description
@ -39,14 +41,18 @@ export abstract class AbstractControlDirective {
* validation errors exist with the current value.
* If the control is not present, null is returned.
*/
get valid(): boolean|null { return this.control ? this.control.valid : null; }
get valid(): boolean|null {
return this.control ? this.control.valid : null;
}
/**
* @description
* Reports whether the control is invalid, meaning that an error exists in the input value.
* If the control is not present, null is returned.
*/
get invalid(): boolean|null { return this.control ? this.control.invalid : null; }
get invalid(): boolean|null {
return this.control ? this.control.invalid : null;
}
/**
* @description
@ -54,7 +60,9 @@ export abstract class AbstractControlDirective {
* errors are not yet available for the input value. If the control is not present, null is
* returned.
*/
get pending(): boolean|null { return this.control ? this.control.pending : null; }
get pending(): boolean|null {
return this.control ? this.control.pending : null;
}
/**
* @description
@ -62,41 +70,53 @@ export abstract class AbstractControlDirective {
* in the UI and is exempt from validation checks and excluded from aggregate
* values of ancestor controls. If the control is not present, null is returned.
*/
get disabled(): boolean|null { return this.control ? this.control.disabled : null; }
get disabled(): boolean|null {
return this.control ? this.control.disabled : null;
}
/**
* @description
* Reports whether the control is enabled, meaning that the control is included in ancestor
* calculations of validity or value. If the control is not present, null is returned.
*/
get enabled(): boolean|null { return this.control ? this.control.enabled : null; }
get enabled(): boolean|null {
return this.control ? this.control.enabled : null;
}
/**
* @description
* Reports the control's validation errors. If the control is not present, null is returned.
*/
get errors(): ValidationErrors|null { return this.control ? this.control.errors : null; }
get errors(): ValidationErrors|null {
return this.control ? this.control.errors : null;
}
/**
* @description
* Reports whether the control is pristine, meaning that the user has not yet changed
* the value in the UI. If the control is not present, null is returned.
*/
get pristine(): boolean|null { return this.control ? this.control.pristine : null; }
get pristine(): boolean|null {
return this.control ? this.control.pristine : null;
}
/**
* @description
* Reports whether the control is dirty, meaning that the user has changed
* the value in the UI. If the control is not present, null is returned.
*/
get dirty(): boolean|null { return this.control ? this.control.dirty : null; }
get dirty(): boolean|null {
return this.control ? this.control.dirty : null;
}
/**
* @description
* Reports whether the control is touched, meaning that the user has triggered
* a `blur` event on it. If the control is not present, null is returned.
*/
get touched(): boolean|null { return this.control ? this.control.touched : null; }
get touched(): boolean|null {
return this.control ? this.control.touched : null;
}
/**
* @description
@ -104,14 +124,18 @@ export abstract class AbstractControlDirective {
* 'VALID', 'INVALID', 'DISABLED', and 'PENDING'.
* If the control is not present, null is returned.
*/
get status(): string|null { return this.control ? this.control.status : null; }
get status(): string|null {
return this.control ? this.control.status : null;
}
/**
* @description
* Reports whether the control is untouched, meaning that the user has not yet triggered
* a `blur` event on it. If the control is not present, null is returned.
*/
get untouched(): boolean|null { return this.control ? this.control.untouched : null; }
get untouched(): boolean|null {
return this.control ? this.control.untouched : null;
}
/**
* @description
@ -137,7 +161,9 @@ export abstract class AbstractControlDirective {
* Returns an array that represents the path from the top-level form to this control.
* Each index is the string name of the control on that level.
*/
get path(): string[]|null { return null; }
get path(): string[]|null {
return null;
}
/**
* @description

20
packages/forms/src/directives/abstract_form_group_directive.ts
View File

@ -31,7 +31,7 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
* @internal
*/
// TODO(issue/24571): remove '!'.
_parent !: ControlContainer;
_parent!: ControlContainer;
/**
* @description
@ -40,7 +40,7 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
* @internal
*/
// TODO(issue/24571): remove '!'.
_validators !: any[];
_validators!: any[];
/**
* @description
@ -49,7 +49,7 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
* @internal
*/
// TODO(issue/24571): remove '!'.
_asyncValidators !: any[];
_asyncValidators!: any[];
/**
* @description
@ -58,7 +58,7 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
*/
ngOnInit(): void {
this._checkParentType();
this.formDirective !.addFormGroup(this);
this.formDirective!.addFormGroup(this);
}
/**
@ -76,7 +76,9 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
* @description
* The `FormGroup` bound to this directive.
*/
get control(): FormGroup { return this.formDirective !.getFormGroup(this); }
get control(): FormGroup {
return this.formDirective!.getFormGroup(this);
}
/**
* @description
@ -90,13 +92,17 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn
* @description
* The top-level directive for this group if present, otherwise null.
*/
get formDirective(): Form|null { return this._parent ? this._parent.formDirective : null; }
get formDirective(): Form|null {
return this._parent ? this._parent.formDirective : null;
}
/**
* @description
* The synchronous validators registered with this group.
*/
get validator(): ValidatorFn|null { return composeValidators(this._validators); }
get validator(): ValidatorFn|null {
return composeValidators(this._validators);
}
/**
* @description

10
packages/forms/src/directives/checkbox_value_accessor.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, ElementRef, Renderer2, forwardRef} from '@angular/core';
import {Directive, ElementRef, forwardRef, Renderer2} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
@ -75,7 +75,9 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
*
* @param fn The callback function
*/
registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
registerOnChange(fn: (_: any) => {}): void {
this.onChange = fn;
}
/**
* @description
@ -83,7 +85,9 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
*
* @param fn The callback function
*/
registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
registerOnTouched(fn: () => {}): void {
this.onTouched = fn;
}
/**
* Sets the "disabled" property on the input element.

10
packages/forms/src/directives/control_container.ts
View File

@ -23,17 +23,21 @@ export abstract class ControlContainer extends AbstractControlDirective {
* The name for the control
*/
// TODO(issue/24571): remove '!'.
name !: string | number | null;
name!: string|number|null;
/**
* @description
* The top-level form directive for the control.
*/
get formDirective(): Form|null { return null; }
get formDirective(): Form|null {
return null;
}
/**
* @description
* The path to this group.
*/
get path(): string[]|null { return null; }
get path(): string[]|null {
return null;
}
}

15
packages/forms/src/directives/default_value_accessor.ts
View File

@ -7,7 +7,8 @@
*/
import {ɵgetDOM as getDOM} from '@angular/common';
import {Directive, ElementRef, Inject, InjectionToken, Optional, Renderer2, forwardRef} from '@angular/core';
import {Directive, ElementRef, forwardRef, Inject, InjectionToken, Optional, Renderer2} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
export const DEFAULT_VALUE_ACCESSOR: any = {
@ -112,7 +113,9 @@ export class DefaultValueAccessor implements ControlValueAccessor {
*
* @param fn The callback function
*/
registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
registerOnChange(fn: (_: any) => void): void {
this.onChange = fn;
}
/**
* @description
@ -120,7 +123,9 @@ export class DefaultValueAccessor implements ControlValueAccessor {
*
* @param fn The callback function
*/
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
/**
* Sets the "disabled" property on the input element.
@ -139,7 +144,9 @@ export class DefaultValueAccessor implements ControlValueAccessor {
}
/** @internal */
_compositionStart(): void { this._composing = true; }
_compositionStart(): void {
this._composing = true;
}
/** @internal */
_compositionEnd(value: any): void {

8
packages/forms/src/directives/ng_control.ts
View File

@ -66,7 +66,9 @@ export abstract class NgControl extends AbstractControlDirective {
*
* @throws An exception that this method is not implemented
*/
get validator(): ValidatorFn|null { return <ValidatorFn>unimplemented(); }
get validator(): ValidatorFn|null {
return <ValidatorFn>unimplemented();
}
/**
* @description
@ -74,7 +76,9 @@ export abstract class NgControl extends AbstractControlDirective {
*
* @throws An exception that this method is not implemented
*/
get asyncValidator(): AsyncValidatorFn|null { return <AsyncValidatorFn>unimplemented(); }
get asyncValidator(): AsyncValidatorFn|null {
return <AsyncValidatorFn>unimplemented();
}
/**
* @description

42
packages/forms/src/directives/ng_control_status.ts
View File

@ -15,15 +15,31 @@ import {NgControl} from './ng_control';
export class AbstractControlStatus {
private _cd: AbstractControlDirective;
constructor(cd: AbstractControlDirective) { this._cd = cd; }
constructor(cd: AbstractControlDirective) {
this._cd = cd;
}
get ngClassUntouched(): boolean { return this._cd.control ? this._cd.control.untouched : false; }
get ngClassTouched(): boolean { return this._cd.control ? this._cd.control.touched : false; }
get ngClassPristine(): boolean { return this._cd.control ? this._cd.control.pristine : false; }
get ngClassDirty(): boolean { return this._cd.control ? this._cd.control.dirty : false; }
get ngClassValid(): boolean { return this._cd.control ? this._cd.control.valid : false; }
get ngClassInvalid(): boolean { return this._cd.control ? this._cd.control.invalid : false; }
get ngClassPending(): boolean { return this._cd.control ? this._cd.control.pending : false; }
get ngClassUntouched(): boolean {
return this._cd.control ? this._cd.control.untouched : false;
}
get ngClassTouched(): boolean {
return this._cd.control ? this._cd.control.touched : false;
}
get ngClassPristine(): boolean {
return this._cd.control ? this._cd.control.pristine : false;
}
get ngClassDirty(): boolean {
return this._cd.control ? this._cd.control.dirty : false;
}
get ngClassValid(): boolean {
return this._cd.control ? this._cd.control.valid : false;
}
get ngClassInvalid(): boolean {
return this._cd.control ? this._cd.control.invalid : false;
}
get ngClassPending(): boolean {
return this._cd.control ? this._cd.control.pending : false;
}
}
export const ngControlStatusHost = {
@ -61,14 +77,16 @@ export const ngControlStatusHost = {
*/
@Directive({selector: '[formControlName],[ngModel],[formControl]', host: ngControlStatusHost})
export class NgControlStatus extends AbstractControlStatus {
constructor(@Self() cd: NgControl) { super(cd); }
constructor(@Self() cd: NgControl) {
super(cd);
}
}
/**
* @description
* Directive automatically applied to Angular form groups that sets CSS classes
* based on control status (valid/invalid/dirty/etc).
*
*
* @see `NgControlStatus`
*
* @ngModule ReactiveFormsModule
@ -81,5 +99,7 @@ export class NgControlStatus extends AbstractControlStatus {
host: ngControlStatusHost
})
export class NgControlStatusGroup extends AbstractControlStatus {
constructor(@Self() cd: ControlContainer) { super(cd); }
constructor(@Self() cd: ControlContainer) {
super(cd);
}
}

51
packages/forms/src/directives/ng_form.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {AfterViewInit, Directive, EventEmitter, Inject, Input, Optional, Self, forwardRef} from '@angular/core';
import {AfterViewInit, Directive, EventEmitter, forwardRef, Inject, Input, Optional, Self} from '@angular/core';
import {AbstractControl, FormControl, FormGroup, FormHooks} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
@ -96,8 +96,7 @@ const resolvedPromise = (() => Promise.resolve(null))();
outputs: ['ngSubmit'],
exportAs: 'ngForm'
})
export class NgForm extends ControlContainer implements Form,
AfterViewInit {
export class NgForm extends ControlContainer implements Form, AfterViewInit {
/**
* @description
* Returns whether the form submission has been triggered.
@ -128,7 +127,7 @@ export class NgForm extends ControlContainer implements Form,
*
*/
// TODO(issue/24571): remove '!'.
@Input('ngFormOptions') options !: {updateOn?: FormHooks};
@Input('ngFormOptions') options!: {updateOn?: FormHooks};
constructor(
@Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
@ -142,32 +141,42 @@ export class NgForm extends ControlContainer implements Form,
* @description
* Lifecycle method called after the view is initialized. For internal use only.
*/
ngAfterViewInit() { this._setUpdateStrategy(); }
ngAfterViewInit() {
this._setUpdateStrategy();
}
/**
* @description
* The directive instance.
*/
get formDirective(): Form { return this; }
get formDirective(): Form {
return this;
}
/**
* @description
* The internal `FormGroup` instance.
*/
get control(): FormGroup { return this.form; }
get control(): FormGroup {
return this.form;
}
/**
* @description
* Returns an array representing the path to this group. Because this directive
* always lives at the top level of a form, it is always an empty array.
*/
get path(): string[] { return []; }
get path(): string[] {
return [];
}
/**
* @description
* Returns a map of the controls in this group.
*/
get controls(): {[key: string]: AbstractControl} { return this.form.controls; }
get controls(): {[key: string]: AbstractControl} {
return this.form.controls;
}
/**
* @description
@ -179,7 +188,7 @@ export class NgForm extends ControlContainer implements Form,
addControl(dir: NgModel): void {
resolvedPromise.then(() => {
const container = this._findContainer(dir.path);
(dir as{control: FormControl}).control =
(dir as {control: FormControl}).control =
<FormControl>container.registerControl(dir.name, dir.control);
setUpControl(dir.control, dir);
dir.control.updateValueAndValidity({emitEvent: false});
@ -193,7 +202,9 @@ export class NgForm extends ControlContainer implements Form,
*
* @param dir The `NgModel` directive instance.
*/
getControl(dir: NgModel): FormControl { return <FormControl>this.form.get(dir.path); }
getControl(dir: NgModel): FormControl {
return <FormControl>this.form.get(dir.path);
}
/**
* @description
@ -248,7 +259,9 @@ export class NgForm extends ControlContainer implements Form,
*
* @param dir The `NgModelGroup` directive instance.
*/
getFormGroup(dir: NgModelGroup): FormGroup { return <FormGroup>this.form.get(dir.path); }
getFormGroup(dir: NgModelGroup): FormGroup {
return <FormGroup>this.form.get(dir.path);
}
/**
* Sets the new value for the provided `NgControl` directive.
@ -258,7 +271,7 @@ export class NgForm extends ControlContainer implements Form,
*/
updateModel(dir: NgControl, value: any): void {
resolvedPromise.then(() => {
const ctrl = <FormControl>this.form.get(dir.path !);
const ctrl = <FormControl>this.form.get(dir.path!);
ctrl.setValue(value);
});
}
@ -269,7 +282,9 @@ export class NgForm extends ControlContainer implements Form,
*
* @param value The new value
*/
setValue(value: {[key: string]: any}): void { this.control.setValue(value); }
setValue(value: {[key: string]: any}): void {
this.control.setValue(value);
}
/**
* @description
@ -279,7 +294,7 @@ export class NgForm extends ControlContainer implements Form,
* @param $event The "submit" event object
*/
onSubmit($event: Event): boolean {
(this as{submitted: boolean}).submitted = true;
(this as {submitted: boolean}).submitted = true;
syncPendingControls(this.form, this._directives);
this.ngSubmit.emit($event);
return false;
@ -289,7 +304,9 @@ export class NgForm extends ControlContainer implements Form,
* @description
* Method called when the "reset" event is triggered on the form.
*/
onReset(): void { this.resetForm(); }
onReset(): void {
this.resetForm();
}
/**
* @description
@ -299,7 +316,7 @@ export class NgForm extends ControlContainer implements Form,
*/
resetForm(value: any = undefined): void {
this.form.reset(value);
(this as{submitted: boolean}).submitted = false;
(this as {submitted: boolean}).submitted = false;
}
private _setUpdateStrategy() {

307
packages/forms/src/directives/ng_model.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, EventEmitter, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
import {Directive, EventEmitter, forwardRef, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges} from '@angular/core';
import {FormControl, FormHooks} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
@ -64,17 +64,17 @@ const resolvedPromise = (() => Promise.resolve(null))();
* (also known as 'banana-box syntax'), the value in the UI always syncs back to
* the domain model in your class.
*
* To inspect the properties of the associated `FormControl` (like validity state),
* export the directive into a local template variable using `ngModel` as the key (ex: `#myVar="ngModel"`).
* You then access the control using the directive's `control` property,
* but most properties used (like `valid` and `dirty`) fall through to the control anyway for direct access.
* See a full list of properties directly available in `AbstractControlDirective`.
* To inspect the properties of the associated `FormControl` (like validity state),
* export the directive into a local template variable using `ngModel` as the key (ex:
* `#myVar="ngModel"`). You then access the control using the directive's `control` property, but
* most properties used (like `valid` and `dirty`) fall through to the control anyway for direct
* access. See a full list of properties directly available in `AbstractControlDirective`.
*
* @see `RadioControlValueAccessor`
* @see `RadioControlValueAccessor`
* @see `SelectControlValueAccessor`
*
*
* @usageNotes
*
*
* ### Using ngModel on a standalone control
*
* The following examples show a simple standalone control using `ngModel`:
@ -84,23 +84,23 @@ const resolvedPromise = (() => Promise.resolve(null))();
* When using the `ngModel` within `<form>` tags, you'll also need to supply a `name` attribute
* so that the control can be registered with the parent form under that name.
*
* In the context of a parent form, it's often unnecessary to include one-way or two-way binding,
* as the parent form syncs the value for you. You access its properties by exporting it into a
* local template variable using `ngForm` such as (`#f="ngForm"`). Use the variable where
* In the context of a parent form, it's often unnecessary to include one-way or two-way binding,
* as the parent form syncs the value for you. You access its properties by exporting it into a
* local template variable using `ngForm` such as (`#f="ngForm"`). Use the variable where
* needed on form submission.
*
* If you do need to populate initial values into your form, using a one-way binding for
* `ngModel` tends to be sufficient as long as you use the exported form's value rather
* than the domain model's value on submit.
*
*
* ### Using ngModel within a form
*
* The following example shows controls using `ngModel` within a form:
*
* {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
*
*
* ### Using a standalone ngModel within a group
*
*
* The following example shows you how to use a standalone ngModel control
* within a form. This controls the display of the form, but doesn't contain form data.
*
@ -111,11 +111,11 @@ const resolvedPromise = (() => Promise.resolve(null))();
* </form>
* <!-- form value: {login: ''} -->
* ```
*
*
* ### Setting the ngModel name attribute through options
*
* The following example shows you an alternate way to set the name attribute. The name attribute is used
* within a custom form component, and the name `@Input` property serves a different purpose.
*
* The following example shows you an alternate way to set the name attribute. The name attribute is
* used within a custom form component, and the name `@Input` property serves a different purpose.
*
* ```html
* <form>
@ -133,8 +133,7 @@ const resolvedPromise = (() => Promise.resolve(null))();
providers: [formControlBinding],
exportAs: 'ngModel'
})
export class NgModel extends NgControl implements OnChanges,
OnDestroy {
export class NgModel extends NgControl implements OnChanges, OnDestroy {
public readonly control: FormControl = new FormControl();
// At runtime we coerce arbitrary values assigned to the "disabled" input to a "boolean".
@ -161,14 +160,14 @@ export class NgModel extends NgControl implements OnChanges,
* uses this name as a key to retrieve this control's value.
*/
// TODO(issue/24571): remove '!'.
@Input() name !: string;
@Input() name!: string;
/**
* @description
* Tracks whether the control is disabled.
*/
// TODO(issue/24571): remove '!'.
@Input('disabled') isDisabled !: boolean;
@Input('disabled') isDisabled!: boolean;
/**
* @description
@ -192,8 +191,7 @@ export class NgModel extends NgControl implements OnChanges,
*
*/
// TODO(issue/24571): remove '!'.
@Input('ngModelOptions')
options !: {name?: string, standalone?: boolean, updateOn?: FormHooks};
@Input('ngModelOptions') options!: {name?: string, standalone?: boolean, updateOn?: FormHooks};
/**
* @description
@ -202,151 +200,156 @@ export class NgModel extends NgControl implements OnChanges,
*/
@Output('ngModelChange') update = new EventEmitter();
constructor(@Optional() @Host() parent: ControlContainer,
@Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
@Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<AsyncValidator|AsyncValidatorFn>,
@Optional() @Self() @Inject(NG_VALUE_ACCESSOR)
valueAccessors: ControlValueAccessor[]) {
super();
this._parent = parent;
this._rawValidators = validators || [];
this._rawAsyncValidators = asyncValidators || [];
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
constructor(
@Optional() @Host() parent: ControlContainer,
@Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
@Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
Array<AsyncValidator|AsyncValidatorFn>,
@Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {
super();
this._parent = parent;
this._rawValidators = validators || [];
this._rawAsyncValidators = asyncValidators || [];
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
/**
* @description
* A lifecycle method called when the directive's inputs change. For internal use
* only.
*
* @param changes A object of key/value pairs for the set of changed inputs.
*/
ngOnChanges(changes: SimpleChanges) {
this._checkForErrors();
if (!this._registered) this._setUpControl();
if ('isDisabled' in changes) {
this._updateDisabled(changes);
}
/**
* @description
* A lifecycle method called when the directive's inputs change. For internal use
* only.
*
* @param changes A object of key/value pairs for the set of changed inputs.
*/
ngOnChanges(changes: SimpleChanges) {
this._checkForErrors();
if (!this._registered) this._setUpControl();
if ('isDisabled' in changes) {
this._updateDisabled(changes);
}
if (isPropertyUpdated(changes, this.viewModel)) {
this._updateValue(this.model);
this.viewModel = this.model;
}
}
if (isPropertyUpdated(changes, this.viewModel)) {
this._updateValue(this.model);
this.viewModel = this.model;
}
}
/**
* @description
* Lifecycle method called before the directive's instance is destroyed. For internal
* use only.
*/
ngOnDestroy(): void { this.formDirective && this.formDirective.removeControl(this); }
/**
* @description
* Lifecycle method called before the directive's instance is destroyed. For internal
* use only.
*/
ngOnDestroy(): void {
this.formDirective && this.formDirective.removeControl(this);
}
/**
* @description
* Returns an array that represents the path from the top-level form to this control.
* Each index is the string name of the control on that level.
*/
get path(): string[] {
return this._parent ? controlPath(this.name, this._parent) : [this.name];
}
/**
* @description
* Returns an array that represents the path from the top-level form to this control.
* Each index is the string name of the control on that level.
*/
get path(): string[] {
return this._parent ? controlPath(this.name, this._parent) : [this.name];
}
/**
* @description
* The top-level directive for this control if present, otherwise null.
*/
get formDirective(): any { return this._parent ? this._parent.formDirective : null; }
/**
* @description
* The top-level directive for this control if present, otherwise null.
*/
get formDirective(): any {
return this._parent ? this._parent.formDirective : null;
}
/**
* @description
* Synchronous validator function composed of all the synchronous validators
* registered with this directive.
*/
get validator(): ValidatorFn|null { return composeValidators(this._rawValidators); }
/**
* @description
* Synchronous validator function composed of all the synchronous validators
* registered with this directive.
*/
get validator(): ValidatorFn|null {
return composeValidators(this._rawValidators);
}
/**
* @description
* Async validator function composed of all the async validators registered with this
* directive.
*/
get asyncValidator(): AsyncValidatorFn|null {
return composeAsyncValidators(this._rawAsyncValidators);
}
/**
* @description
* Async validator function composed of all the async validators registered with this
* directive.
*/
get asyncValidator(): AsyncValidatorFn|null {
return composeAsyncValidators(this._rawAsyncValidators);
}
/**
* @description
* Sets the new value for the view model and emits an `ngModelChange` event.
*
* @param newValue The new value emitted by `ngModelChange`.
*/
viewToModelUpdate(newValue: any): void {
this.viewModel = newValue;
this.update.emit(newValue);
}
/**
* @description
* Sets the new value for the view model and emits an `ngModelChange` event.
*
* @param newValue The new value emitted by `ngModelChange`.
*/
viewToModelUpdate(newValue: any): void {
this.viewModel = newValue;
this.update.emit(newValue);
}
private _setUpControl(): void {
this._setUpdateStrategy();
this._isStandalone() ? this._setUpStandalone() :
this.formDirective.addControl(this);
this._registered = true;
}
private _setUpControl(): void {
this._setUpdateStrategy();
this._isStandalone() ? this._setUpStandalone() : this.formDirective.addControl(this);
this._registered = true;
}
private _setUpdateStrategy(): void {
if (this.options && this.options.updateOn != null) {
this.control._updateOn = this.options.updateOn;
}
}
private _setUpdateStrategy(): void {
if (this.options && this.options.updateOn != null) {
this.control._updateOn = this.options.updateOn;
}
}
private _isStandalone(): boolean {
return !this._parent || !!(this.options && this.options.standalone);
}
private _isStandalone(): boolean {
return !this._parent || !!(this.options && this.options.standalone);
}
private _setUpStandalone(): void {
setUpControl(this.control, this);
this.control.updateValueAndValidity({emitEvent: false});
}
private _setUpStandalone(): void {
setUpControl(this.control, this);
this.control.updateValueAndValidity({emitEvent: false});
}
private _checkForErrors(): void {
if (!this._isStandalone()) {
this._checkParentType();
}
this._checkName();
}
private _checkForErrors(): void {
if (!this._isStandalone()) {
this._checkParentType();
}
this._checkName();
}
private _checkParentType(): void {
if (!(this._parent instanceof NgModelGroup) &&
this._parent instanceof AbstractFormGroupDirective) {
TemplateDrivenErrors.formGroupNameException();
} else if (
!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
TemplateDrivenErrors.modelParentException();
}
}
private _checkParentType(): void {
if (!(this._parent instanceof NgModelGroup) &&
this._parent instanceof AbstractFormGroupDirective) {
TemplateDrivenErrors.formGroupNameException();
} else if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
TemplateDrivenErrors.modelParentException();
}
}
private _checkName(): void {
if (this.options && this.options.name) this.name = this.options.name;
private _checkName(): void {
if (this.options && this.options.name) this.name = this.options.name;
if (!this._isStandalone() && !this.name) {
TemplateDrivenErrors.missingNameException();
}
}
if (!this._isStandalone() && !this.name) {
TemplateDrivenErrors.missingNameException();
}
}
private _updateValue(value: any): void {
resolvedPromise.then(
() => { this.control.setValue(value, {emitViewToModelChange: false}); });
}
private _updateValue(value: any): void {
resolvedPromise.then(() => {
this.control.setValue(value, {emitViewToModelChange: false});
});
}
private _updateDisabled(changes: SimpleChanges) {
const disabledValue = changes['isDisabled'].currentValue;
private _updateDisabled(changes: SimpleChanges) {
const disabledValue = changes['isDisabled'].currentValue;
const isDisabled =
disabledValue === '' || (disabledValue && disabledValue !== 'false');
const isDisabled = disabledValue === '' || (disabledValue && disabledValue !== 'false');
resolvedPromise.then(() => {
if (isDisabled && !this.control.disabled) {
this.control.disable();
} else if (!isDisabled && this.control.disabled) {
this.control.enable();
}
});
}
resolvedPromise.then(() => {
if (isDisabled && !this.control.disabled) {
this.control.disable();
} else if (!isDisabled && this.control.disabled) {
this.control.enable();
}
});
}
}

4
packages/forms/src/directives/ng_model_group.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, Host, Inject, Input, OnDestroy, OnInit, Optional, Self, SkipSelf, forwardRef} from '@angular/core';
import {Directive, forwardRef, Host, Inject, Input, OnDestroy, OnInit, Optional, Self, SkipSelf} from '@angular/core';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
@ -54,7 +54,7 @@ export class NgModelGroup extends AbstractFormGroupDirective implements OnInit,
* to a key in the parent `NgForm`.
*/
// TODO(issue/24571): remove '!'.
@Input('ngModelGroup') name !: string;
@Input('ngModelGroup') name!: string;
constructor(
@Host() @SkipSelf() parent: ControlContainer,

6
packages/forms/src/directives/normalize_validator.ts
View File

@ -9,7 +9,7 @@
import {AbstractControl} from '../model';
import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './validators';
export function normalizeValidator(validator: ValidatorFn | Validator): ValidatorFn {
export function normalizeValidator(validator: ValidatorFn|Validator): ValidatorFn {
if ((<Validator>validator).validate) {
return (c: AbstractControl) => (<Validator>validator).validate(c);
} else {
@ -17,8 +17,8 @@ export function normalizeValidator(validator: ValidatorFn | Validator): Validato
}
}
export function normalizeAsyncValidator(validator: AsyncValidatorFn | AsyncValidator):
AsyncValidatorFn {
export function normalizeAsyncValidator(validator: AsyncValidatorFn|
AsyncValidator): AsyncValidatorFn {
if ((<AsyncValidator>validator).validate) {
return (c: AbstractControl) => (<AsyncValidator>validator).validate(c);
} else {

10
packages/forms/src/directives/number_value_accessor.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, ElementRef, Renderer2, forwardRef} from '@angular/core';
import {Directive, ElementRef, forwardRef, Renderer2} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
@ -84,7 +84,9 @@ export class NumberValueAccessor implements ControlValueAccessor {
* @param fn The callback function
*/
registerOnChange(fn: (_: number|null) => void): void {
this.onChange = (value) => { fn(value == '' ? null : parseFloat(value)); };
this.onChange = (value) => {
fn(value == '' ? null : parseFloat(value));
};
}
/**
@ -93,7 +95,9 @@ export class NumberValueAccessor implements ControlValueAccessor {
*
* @param fn The callback function
*/
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
/**
* Sets the "disabled" property on the input element.

27
packages/forms/src/directives/radio_control_value_accessor.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, ElementRef, Injectable, Injector, Input, OnDestroy, OnInit, Renderer2, forwardRef} from '@angular/core';
import {Directive, ElementRef, forwardRef, Injectable, Injector, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
import {NgControl} from './ng_control';
@ -93,17 +93,16 @@ export class RadioControlRegistry {
host: {'(change)': 'onChange()', '(blur)': 'onTouched()'},
providers: [RADIO_VALUE_ACCESSOR]
})
export class RadioControlValueAccessor implements ControlValueAccessor,
OnDestroy, OnInit {
export class RadioControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit {
/** @internal */
// TODO(issue/24571): remove '!'.
_state !: boolean;
_state!: boolean;
/** @internal */
// TODO(issue/24571): remove '!'.
_control !: NgControl;
_control!: NgControl;
/** @internal */
// TODO(issue/24571): remove '!'.
_fn !: Function;
_fn!: Function;
/**
* @description
@ -122,7 +121,7 @@ export class RadioControlValueAccessor implements ControlValueAccessor,
* Tracks the name of the radio input element.
*/
// TODO(issue/24571): remove '!'.
@Input() name !: string;
@Input() name!: string;
/**
* @description
@ -130,7 +129,7 @@ export class RadioControlValueAccessor implements ControlValueAccessor,
* to a key in the parent `FormGroup` or `FormArray`.
*/
// TODO(issue/24571): remove '!'.
@Input() formControlName !: string;
@Input() formControlName!: string;
/**
* @description
@ -156,7 +155,9 @@ export class RadioControlValueAccessor implements ControlValueAccessor,
* @description
* Lifecycle method called before the directive's instance is destroyed. For internal use only.
*/
ngOnDestroy(): void { this._registry.remove(this); }
ngOnDestroy(): void {
this._registry.remove(this);
}
/**
* @description
@ -188,7 +189,9 @@ export class RadioControlValueAccessor implements ControlValueAccessor,
*
* @param value
*/
fireUncheck(value: any): void { this.writeValue(value); }
fireUncheck(value: any): void {
this.writeValue(value);
}
/**
* @description
@ -196,7 +199,9 @@ export class RadioControlValueAccessor implements ControlValueAccessor,
*
* @param fn The callback function
*/
registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
registerOnTouched(fn: () => {}): void {
this.onTouched = fn;
}
/**
* Sets the "disabled" property on the input element.

10
packages/forms/src/directives/range_value_accessor.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, ElementRef, Renderer2, StaticProvider, forwardRef} from '@angular/core';
import {Directive, ElementRef, forwardRef, Renderer2, StaticProvider} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
@ -82,7 +82,9 @@ export class RangeValueAccessor implements ControlValueAccessor {
* @param fn The callback function
*/
registerOnChange(fn: (_: number|null) => void): void {
this.onChange = (value) => { fn(value == '' ? null : parseFloat(value)); };
this.onChange = (value) => {
fn(value == '' ? null : parseFloat(value));
};
}
/**
@ -91,7 +93,9 @@ export class RangeValueAccessor implements ControlValueAccessor {
*
* @param fn The callback function
*/
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
/**
* Sets the "disabled" property on the range input element.

159
packages/forms/src/directives/reactive_directives/form_control_directive.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, EventEmitter, Inject, InjectionToken, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
import {Directive, EventEmitter, forwardRef, Inject, InjectionToken, Input, OnChanges, Optional, Output, Self, SimpleChanges} from '@angular/core';
import {FormControl} from '../../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
@ -31,7 +31,7 @@ export const formControlBinding: any = {
/**
* @description
* * Syncs a standalone `FormControl` instance to a form control element.
*
*
* @see [Reactive Forms Guide](guide/reactive-forms)
* @see `FormControl`
* @see `AbstractControl`
@ -39,7 +39,7 @@ export const formControlBinding: any = {
* @usageNotes
*
* ### Registering a single form control
*
*
* The following examples shows how to register a standalone control and set its value.
*
* {@example forms/ts/simpleFormControl/simple_form_control_example.ts region='Component'}
@ -129,14 +129,16 @@ export class FormControlDirective extends NgControl implements OnChanges {
* Tracks the `FormControl` instance bound to the directive.
*/
// TODO(issue/24571): remove '!'.
@Input('formControl') form !: FormControl;
@Input('formControl') form!: FormControl;
/**
* @description
* Triggers a warning that this input should not be used with reactive forms.
*/
@Input('disabled')
set isDisabled(isDisabled: boolean) { ReactiveErrors.disabledAttrWarning(); }
set isDisabled(isDisabled: boolean) {
ReactiveErrors.disabledAttrWarning();
}
// TODO(kara): remove next 4 properties once deprecation period is over
@ -164,81 +166,88 @@ export class FormControlDirective extends NgControl implements OnChanges {
*/
_ngModelWarningSent = false;
constructor(@Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
@Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<AsyncValidator|AsyncValidatorFn>,
@Optional() @Self() @Inject(NG_VALUE_ACCESSOR)
valueAccessors: ControlValueAccessor[],
@Optional() @Inject(NG_MODEL_WITH_FORM_CONTROL_WARNING) private _ngModelWarningConfig: string|null) {
super();
this._rawValidators = validators || [];
this._rawAsyncValidators = asyncValidators || [];
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
constructor(
@Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
@Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
Array<AsyncValidator|AsyncValidatorFn>,
@Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
@Optional() @Inject(NG_MODEL_WITH_FORM_CONTROL_WARNING) private _ngModelWarningConfig: string|
null) {
super();
this._rawValidators = validators || [];
this._rawAsyncValidators = asyncValidators || [];
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
/**
* @description
* A lifecycle method called when the directive's inputs change. For internal use
* only.
*
* @param changes A object of key/value pairs for the set of changed inputs.
*/
ngOnChanges(changes: SimpleChanges): void {
if (this._isControlChanged(changes)) {
setUpControl(this.form, this);
if (this.control.disabled && this.valueAccessor !.setDisabledState) {
this.valueAccessor !.setDisabledState !(true);
}
this.form.updateValueAndValidity({emitEvent: false});
}
if (isPropertyUpdated(changes, this.viewModel)) {
_ngModelWarning(
'formControl', FormControlDirective, this, this._ngModelWarningConfig);
this.form.setValue(this.model);
this.viewModel = this.model;
}
}
/**
* @description
* A lifecycle method called when the directive's inputs change. For internal use
* only.
*
* @param changes A object of key/value pairs for the set of changed inputs.
*/
ngOnChanges(changes: SimpleChanges): void {
if (this._isControlChanged(changes)) {
setUpControl(this.form, this);
if (this.control.disabled && this.valueAccessor!.setDisabledState) {
this.valueAccessor!.setDisabledState!(true);
}
this.form.updateValueAndValidity({emitEvent: false});
}
if (isPropertyUpdated(changes, this.viewModel)) {
_ngModelWarning('formControl', FormControlDirective, this, this._ngModelWarningConfig);
this.form.setValue(this.model);
this.viewModel = this.model;
}
}
/**
* @description
* Returns an array that represents the path from the top-level form to this control.
* Each index is the string name of the control on that level.
*/
get path(): string[] { return []; }
/**
* @description
* Returns an array that represents the path from the top-level form to this control.
* Each index is the string name of the control on that level.
*/
get path(): string[] {
return [];
}
/**
* @description
* Synchronous validator function composed of all the synchronous validators
* registered with this directive.
*/
get validator(): ValidatorFn|null { return composeValidators(this._rawValidators); }
/**
* @description
* Synchronous validator function composed of all the synchronous validators
* registered with this directive.
*/
get validator(): ValidatorFn|null {
return composeValidators(this._rawValidators);
}
/**
* @description
* Async validator function composed of all the async validators registered with this
* directive.
*/
get asyncValidator(): AsyncValidatorFn|null {
return composeAsyncValidators(this._rawAsyncValidators);
}
/**
* @description
* Async validator function composed of all the async validators registered with this
* directive.
*/
get asyncValidator(): AsyncValidatorFn|null {
return composeAsyncValidators(this._rawAsyncValidators);
}
/**
* @description
* The `FormControl` bound to this directive.
*/
get control(): FormControl { return this.form; }
/**
* @description
* The `FormControl` bound to this directive.
*/
get control(): FormControl {
return this.form;
}
/**
* @description
* Sets the new value for the view model and emits an `ngModelChange` event.
*
* @param newValue The new value for the view model.
*/
viewToModelUpdate(newValue: any): void {
this.viewModel = newValue;
this.update.emit(newValue);
}
/**
* @description
* Sets the new value for the view model and emits an `ngModelChange` event.
*
* @param newValue The new value for the view model.
*/
viewToModelUpdate(newValue: any): void {
this.viewModel = newValue;
this.update.emit(newValue);
}
private _isControlChanged(changes: {[key: string]: any}): boolean {
return changes.hasOwnProperty('form');
}
private _isControlChanged(changes: {[key: string]: any}): boolean {
return changes.hasOwnProperty('form');
}
}

32
packages/forms/src/directives/reactive_directives/form_control_name.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, EventEmitter, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, SkipSelf, forwardRef} from '@angular/core';
import {Directive, EventEmitter, forwardRef, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, SkipSelf} from '@angular/core';
import {FormControl} from '../../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
@ -31,13 +31,13 @@ export const controlNameBinding: any = {
* @description
* Syncs a `FormControl` in an existing `FormGroup` to a form control
* element by name.
*
*
* @see [Reactive Forms Guide](guide/reactive-forms)
* @see `FormControl`
* @see `AbstractControl`
*
* @usageNotes
*
*
* ### Register `FormControl` within a group
*
* The following example shows how to register multiple form controls within a form group
@ -140,7 +140,7 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
* Tracks the `FormControl` instance bound to the directive.
*/
// TODO(issue/24571): remove '!'.
readonly control !: FormControl;
readonly control!: FormControl;
/**
* @description
@ -152,14 +152,16 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
* to indices when iterating over controls in a `FormArray`.
*/
// TODO(issue/24571): remove '!'.
@Input('formControlName') name !: string | number | null;
@Input('formControlName') name!: string|number|null;
/**
* @description
* Triggers a warning that this input should not be used with reactive forms.
*/
@Input('disabled')
set isDisabled(isDisabled: boolean) { ReactiveErrors.disabledAttrWarning(); }
set isDisabled(isDisabled: boolean) {
ReactiveErrors.disabledAttrWarning();
}
// TODO(kara): remove next 4 properties once deprecation period is over
@ -244,21 +246,25 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
* Each index is the string name of the control on that level.
*/
get path(): string[] {
return controlPath(this.name == null ? this.name : this.name.toString(), this._parent !);
return controlPath(this.name == null ? this.name : this.name.toString(), this._parent!);
}
/**
* @description
* The top-level directive for this group if present, otherwise null.
*/
get formDirective(): any { return this._parent ? this._parent.formDirective : null; }
get formDirective(): any {
return this._parent ? this._parent.formDirective : null;
}
/**
* @description
* Synchronous validator function composed of all the synchronous validators
* registered with this directive.
*/
get validator(): ValidatorFn|null { return composeValidators(this._rawValidators); }
get validator(): ValidatorFn|null {
return composeValidators(this._rawValidators);
}
/**
* @description
@ -266,7 +272,7 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
* directive.
*/
get asyncValidator(): AsyncValidatorFn {
return composeAsyncValidators(this._rawAsyncValidators) !;
return composeAsyncValidators(this._rawAsyncValidators)!;
}
private _checkParentType(): void {
@ -282,9 +288,9 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
private _setUpControl() {
this._checkParentType();
(this as{control: FormControl}).control = this.formDirective.addControl(this);
if (this.control.disabled && this.valueAccessor !.setDisabledState) {
this.valueAccessor !.setDisabledState !(true);
(this as {control: FormControl}).control = this.formDirective.addControl(this);
if (this.control.disabled && this.valueAccessor!.setDisabledState) {
this.valueAccessor!.setDisabledState!(true);
}
this._added = true;
}

54
packages/forms/src/directives/reactive_directives/form_group_directive.ts
View File

@ -6,7 +6,8 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, EventEmitter, Inject, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
import {Directive, EventEmitter, forwardRef, Inject, Input, OnChanges, Optional, Output, Self, SimpleChanges} from '@angular/core';
import {FormArray, FormControl, FormGroup} from '../../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../../validators';
import {ControlContainer} from '../control_container';
@ -31,7 +32,7 @@ export const formDirectiveProvider: any = {
* `FormGroup` instance to match any child `FormControl`, `FormGroup`,
* and `FormArray` instances to child `FormControlName`, `FormGroupName`,
* and `FormArrayName` directives.
*
*
* @see [Reactive Forms Guide](guide/reactive-forms)
* @see `AbstractControl`
*
@ -51,8 +52,7 @@ export const formDirectiveProvider: any = {
host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
exportAs: 'ngForm'
})
export class FormGroupDirective extends ControlContainer implements Form,
OnChanges {
export class FormGroupDirective extends ControlContainer implements Form, OnChanges {
/**
* @description
* Reports whether the form submission has been triggered.
@ -60,7 +60,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
public readonly submitted: boolean = false;
// TODO(issue/24571): remove '!'.
private _oldForm !: FormGroup;
private _oldForm!: FormGroup;
/**
* @description
@ -72,7 +72,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
* @description
* Tracks the `FormGroup` bound to this directive.
*/
@Input('formGroup') form: FormGroup = null !;
@Input('formGroup') form: FormGroup = null!;
/**
* @description
@ -105,20 +105,26 @@ export class FormGroupDirective extends ControlContainer implements Form,
* @description
* Returns this directive's instance.
*/
get formDirective(): Form { return this; }
get formDirective(): Form {
return this;
}
/**
* @description
* Returns the `FormGroup` bound to this directive.
*/
get control(): FormGroup { return this.form; }
get control(): FormGroup {
return this.form;
}
/**
* @description
* Returns an array representing the path to this group. Because this directive
* always lives at the top level of a form, it always an empty array.
*/
get path(): string[] { return []; }
get path(): string[] {
return [];
}
/**
* @description
@ -141,7 +147,9 @@ export class FormGroupDirective extends ControlContainer implements Form,
*
* @param dir The `FormControlName` directive instance.
*/
getControl(dir: FormControlName): FormControl { return <FormControl>this.form.get(dir.path); }
getControl(dir: FormControlName): FormControl {
return <FormControl>this.form.get(dir.path);
}
/**
* @description
@ -149,7 +157,9 @@ export class FormGroupDirective extends ControlContainer implements Form,
*
* @param dir The `FormControlName` directive instance.
*/
removeControl(dir: FormControlName): void { removeDir<FormControlName>(this.directives, dir); }
removeControl(dir: FormControlName): void {
removeDir<FormControlName>(this.directives, dir);
}
/**
* Adds a new `FormGroupName` directive instance to the form.
@ -175,7 +185,9 @@ export class FormGroupDirective extends ControlContainer implements Form,
*
* @param dir The `FormGroupName` directive instance.
*/
getFormGroup(dir: FormGroupName): FormGroup { return <FormGroup>this.form.get(dir.path); }
getFormGroup(dir: FormGroupName): FormGroup {
return <FormGroup>this.form.get(dir.path);
}
/**
* Adds a new `FormArrayName` directive instance to the form.
@ -201,7 +213,9 @@ export class FormGroupDirective extends ControlContainer implements Form,
*
* @param dir The `FormArrayName` directive instance.
*/
getFormArray(dir: FormArrayName): FormArray { return <FormArray>this.form.get(dir.path); }
getFormArray(dir: FormArrayName): FormArray {
return <FormArray>this.form.get(dir.path);
}
/**
* Sets the new value for the provided `FormControlName` directive.
@ -222,7 +236,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
* @param $event The "submit" event object
*/
onSubmit($event: Event): boolean {
(this as{submitted: boolean}).submitted = true;
(this as {submitted: boolean}).submitted = true;
syncPendingControls(this.form, this.directives);
this.ngSubmit.emit($event);
return false;
@ -232,7 +246,9 @@ export class FormGroupDirective extends ControlContainer implements Form,
* @description
* Method called when the "reset" event is triggered on the form.
*/
onReset(): void { this.resetForm(); }
onReset(): void {
this.resetForm();
}
/**
* @description
@ -242,7 +258,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
*/
resetForm(value: any = undefined): void {
this.form.reset(value);
(this as{submitted: boolean}).submitted = false;
(this as {submitted: boolean}).submitted = false;
}
@ -253,7 +269,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
if (dir.control !== newCtrl) {
cleanUpControl(dir.control, dir);
if (newCtrl) setUpControl(newCtrl, dir);
(dir as{control: FormControl}).control = newCtrl;
(dir as {control: FormControl}).control = newCtrl;
}
});
@ -268,10 +284,10 @@ export class FormGroupDirective extends ControlContainer implements Form,
private _updateValidators() {
const sync = composeValidators(this._validators);
this.form.validator = Validators.compose([this.form.validator !, sync !]);
this.form.validator = Validators.compose([this.form.validator!, sync!]);
const async = composeAsyncValidators(this._asyncValidators);
this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator !, async !]);
this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator!, async!]);
}
private _checkFormPresent() {

16
packages/forms/src/directives/reactive_directives/form_group_name.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, Host, Inject, Input, OnDestroy, OnInit, Optional, Self, SkipSelf, forwardRef} from '@angular/core';
import {Directive, forwardRef, Host, Inject, Input, OnDestroy, OnInit, Optional, Self, SkipSelf} from '@angular/core';
import {FormArray} from '../../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
@ -82,7 +82,7 @@ export class FormGroupName extends AbstractFormGroupDirective implements OnInit,
* to indices when iterating over groups in a `FormArray`.
*/
// TODO(issue/24571): remove '!'.
@Input('formGroupName') name !: string | number | null;
@Input('formGroupName') name!: string|number|null;
constructor(
@Optional() @Host() @SkipSelf() parent: ControlContainer,
@ -152,7 +152,7 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
* to indices when iterating over arrays in a `FormArray`.
*/
// TODO(issue/24571): remove '!'.
@Input('formArrayName') name !: string | number | null;
@Input('formArrayName') name!: string|number|null;
constructor(
@Optional() @Host() @SkipSelf() parent: ControlContainer,
@ -172,7 +172,7 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
*/
ngOnInit(): void {
this._checkParentType();
this.formDirective !.addFormArray(this);
this.formDirective!.addFormArray(this);
}
/**
@ -189,7 +189,9 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
* @description
* The `FormArray` bound to this directive.
*/
get control(): FormArray { return this.formDirective !.getFormArray(this); }
get control(): FormArray {
return this.formDirective!.getFormArray(this);
}
/**
* @description
@ -213,7 +215,9 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
* Synchronous validator function composed of all the synchronous validators registered with this
* directive.
*/
get validator(): ValidatorFn|null { return composeValidators(this._validators); }
get validator(): ValidatorFn|null {
return composeValidators(this._validators);
}
/**
* @description

5
packages/forms/src/directives/reactive_errors.ts
View File

@ -83,8 +83,9 @@ export class ReactiveErrors {
in Angular v7.
For more information on this, see our API docs here:
https://angular.io/api/forms/${directiveName === 'formControl' ? 'FormControlDirective'
: 'FormControlName'}#use-with-ngmodel
https://angular.io/api/forms/${
directiveName === 'formControl' ? 'FormControlDirective' :
'FormControlName'}#use-with-ngmodel
`);
}
}

14
packages/forms/src/directives/select_control_value_accessor.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, ElementRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider, forwardRef, ɵlooseIdentical as looseIdentical} from '@angular/core';
import {Directive, ElementRef, forwardRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider, ɵlooseIdentical as looseIdentical} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
@ -16,7 +16,7 @@ export const SELECT_VALUE_ACCESSOR: StaticProvider = {
multi: true
};
function _buildValueString(id: string | null, value: any): string {
function _buildValueString(id: string|null, value: any): string {
if (id == null) return `${value}`;
if (value && typeof value === 'object') value = 'Object';
return `${id}: ${value}`.slice(0, 50);
@ -160,7 +160,9 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
*
* @param fn The callback function
*/
registerOnTouched(fn: () => any): void { this.onTouched = fn; }
registerOnTouched(fn: () => any): void {
this.onTouched = fn;
}
/**
* Sets the "disabled" property on the select input element.
@ -172,7 +174,9 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
}
/** @internal */
_registerOption(): string { return (this._idCounter++).toString(); }
_registerOption(): string {
return (this._idCounter++).toString();
}
/** @internal */
_getOptionId(value: any): string|null {
@ -206,7 +210,7 @@ export class NgSelectOption implements OnDestroy {
* ID of the option element
*/
// TODO(issue/24571): remove '!'.
id !: string;
id!: string;
constructor(
private _element: ElementRef, private _renderer: Renderer2,

40
packages/forms/src/directives/select_multiple_control_value_accessor.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, ElementRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider, forwardRef, ɵlooseIdentical as looseIdentical} from '@angular/core';
import {Directive, ElementRef, forwardRef, Host, Input, OnDestroy, Optional, Renderer2, StaticProvider, ɵlooseIdentical as looseIdentical} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
@ -36,24 +36,24 @@ interface HTMLOption {
/** Mock interface for HTMLCollection */
abstract class HTMLCollection {
// TODO(issue/24571): remove '!'.
length !: number;
length!: number;
abstract item(_: number): HTMLOption;
}
/**
* @description
* The `ControlValueAccessor` for writing multi-select control values and listening to multi-select control
* changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
* directives.
*
* The `ControlValueAccessor` for writing multi-select control values and listening to multi-select
* control changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
* `NgModel` directives.
*
* @see `SelectControlValueAccessor`
*
* @usageNotes
*
*
* ### Using a multi-select control
*
*
* The follow example shows you how to use a multi-select control with a reactive form.
*
*
* ```ts
* const countryControl = new FormControl();
* ```
@ -65,9 +65,9 @@ abstract class HTMLCollection {
* </option>
* </select>
* ```
*
*
* ### Customizing option selection
*
*
* To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
* See the `SelectControlValueAccessor` for usage.
*
@ -135,9 +135,13 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
if (Array.isArray(value)) {
// convert values to ids
const ids = value.map((v) => this._getOptionId(v));
optionSelectedStateSetter = (opt, o) => { opt._setSelected(ids.indexOf(o.toString()) > -1); };
optionSelectedStateSetter = (opt, o) => {
opt._setSelected(ids.indexOf(o.toString()) > -1);
};
} else {
optionSelectedStateSetter = (opt, o) => { opt._setSelected(false); };
optionSelectedStateSetter = (opt, o) => {
opt._setSelected(false);
};
}
this._optionMap.forEach(optionSelectedStateSetter);
}
@ -182,7 +186,9 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
*
* @param fn The callback function
*/
registerOnTouched(fn: () => any): void { this.onTouched = fn; }
registerOnTouched(fn: () => any): void {
this.onTouched = fn;
}
/**
* Sets the "disabled" property on the select input element.
@ -203,7 +209,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
/** @internal */
_getOptionId(value: any): string|null {
for (const id of Array.from(this._optionMap.keys())) {
if (this._compareWith(this._optionMap.get(id) !._value, value)) return id;
if (this._compareWith(this._optionMap.get(id)!._value, value)) return id;
}
return null;
}
@ -211,7 +217,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
/** @internal */
_getOptionValue(valueString: string): any {
const id: string = _extractId(valueString);
return this._optionMap.has(id) ? this._optionMap.get(id) !._value : valueString;
return this._optionMap.has(id) ? this._optionMap.get(id)!._value : valueString;
}
}
@ -228,7 +234,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
@Directive({selector: 'option'})
export class ɵNgSelectMultipleOption implements OnDestroy {
// TODO(issue/24571): remove '!'.
id !: string;
id!: string;
/** @internal */
_value: any;

43
packages/forms/src/directives/shared.ts
View File

@ -28,43 +28,44 @@ import {SelectMultipleControlValueAccessor} from './select_multiple_control_valu
import {AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn} from './validators';
export function controlPath(name: string | null, parent: ControlContainer): string[] {
return [...parent.path !, name !];
export function controlPath(name: string|null, parent: ControlContainer): string[] {
return [...parent.path!, name!];
}
export function setUpControl(control: FormControl, dir: NgControl): void {
if (!control) _throwError(dir, 'Cannot find control with');
if (!dir.valueAccessor) _throwError(dir, 'No value accessor for form control with');
control.validator = Validators.compose([control.validator !, dir.validator]);
control.asyncValidator = Validators.composeAsync([control.asyncValidator !, dir.asyncValidator]);
dir.valueAccessor !.writeValue(control.value);
control.validator = Validators.compose([control.validator!, dir.validator]);
control.asyncValidator = Validators.composeAsync([control.asyncValidator!, dir.asyncValidator]);
dir.valueAccessor!.writeValue(control.value);
setUpViewChangePipeline(control, dir);
setUpModelChangePipeline(control, dir);
setUpBlurPipeline(control, dir);
if (dir.valueAccessor !.setDisabledState) {
control.registerOnDisabledChange(
(isDisabled: boolean) => { dir.valueAccessor !.setDisabledState !(isDisabled); });
if (dir.valueAccessor!.setDisabledState) {
control.registerOnDisabledChange((isDisabled: boolean) => {
dir.valueAccessor!.setDisabledState!(isDisabled);
});
}
// re-run validation when validator binding changes, e.g. minlength=3 -> minlength=4
dir._rawValidators.forEach((validator: Validator | ValidatorFn) => {
dir._rawValidators.forEach((validator: Validator|ValidatorFn) => {
if ((<Validator>validator).registerOnValidatorChange)
(<Validator>validator).registerOnValidatorChange !(() => control.updateValueAndValidity());
(<Validator>validator).registerOnValidatorChange!(() => control.updateValueAndValidity());
});
dir._rawAsyncValidators.forEach((validator: AsyncValidator | AsyncValidatorFn) => {
dir._rawAsyncValidators.forEach((validator: AsyncValidator|AsyncValidatorFn) => {
if ((<Validator>validator).registerOnValidatorChange)
(<Validator>validator).registerOnValidatorChange !(() => control.updateValueAndValidity());
(<Validator>validator).registerOnValidatorChange!(() => control.updateValueAndValidity());
});
}
export function cleanUpControl(control: FormControl, dir: NgControl) {
dir.valueAccessor !.registerOnChange(() => _noControlError(dir));
dir.valueAccessor !.registerOnTouched(() => _noControlError(dir));
dir.valueAccessor!.registerOnChange(() => _noControlError(dir));
dir.valueAccessor!.registerOnTouched(() => _noControlError(dir));
dir._rawValidators.forEach((validator: any) => {
if (validator.registerOnValidatorChange) {
@ -82,7 +83,7 @@ export function cleanUpControl(control: FormControl, dir: NgControl) {
}
function setUpViewChangePipeline(control: FormControl, dir: NgControl): void {
dir.valueAccessor !.registerOnChange((newValue: any) => {
dir.valueAccessor!.registerOnChange((newValue: any) => {
control._pendingValue = newValue;
control._pendingChange = true;
control._pendingDirty = true;
@ -92,7 +93,7 @@ function setUpViewChangePipeline(control: FormControl, dir: NgControl): void {
}
function setUpBlurPipeline(control: FormControl, dir: NgControl): void {
dir.valueAccessor !.registerOnTouched(() => {
dir.valueAccessor!.registerOnTouched(() => {
control._pendingTouched = true;
if (control.updateOn === 'blur' && control._pendingChange) updateControl(control, dir);
@ -110,7 +111,7 @@ function updateControl(control: FormControl, dir: NgControl): void {
function setUpModelChangePipeline(control: FormControl, dir: NgControl): void {
control.registerOnChange((newValue: any, emitModelEvent: boolean) => {
// control -> view
dir.valueAccessor !.writeValue(newValue);
dir.valueAccessor!.writeValue(newValue);
// control -> ngModel
if (emitModelEvent) dir.viewToModelUpdate(newValue);
@ -118,7 +119,7 @@ function setUpModelChangePipeline(control: FormControl, dir: NgControl): void {
}
export function setUpFormContainer(
control: FormGroup | FormArray, dir: AbstractFormGroupDirective | FormArrayName) {
control: FormGroup|FormArray, dir: AbstractFormGroupDirective|FormArrayName) {
if (control == null) _throwError(dir, 'Cannot find control with');
control.validator = Validators.compose([control.validator, dir.validator]);
control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
@ -130,9 +131,9 @@ function _noControlError(dir: NgControl) {
function _throwError(dir: AbstractControlDirective, message: string): void {
let messageEnd: string;
if (dir.path !.length > 1) {
if (dir.path!.length > 1) {
messageEnd = `path: '${dir.path!.join(' -> ')}'`;
} else if (dir.path ![0]) {
} else if (dir.path![0]) {
messageEnd = `name: '${dir.path}'`;
} else {
messageEnd = 'unspecified name attribute';
@ -226,7 +227,7 @@ export function removeDir<T>(list: T[], el: T): void {
// TODO(kara): remove after deprecation period
export function _ngModelWarning(
name: string, type: {_ngModelWarningSentOnce: boolean},
instance: {_ngModelWarningSent: boolean}, warningConfig: string | null) {
instance: {_ngModelWarningSent: boolean}, warningConfig: string|null) {
if (!isDevMode() || warningConfig === 'never') return;
if (((warningConfig === null || warningConfig === 'once') && !type._ngModelWarningSentOnce) ||

101
packages/forms/src/directives/validators.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Directive, Input, OnChanges, SimpleChanges, StaticProvider, forwardRef} from '@angular/core';
import {Directive, forwardRef, Input, OnChanges, SimpleChanges, StaticProvider} from '@angular/core';
import {Observable} from 'rxjs';
import {AbstractControl} from '../model';
@ -136,11 +136,11 @@ export const CHECKBOX_REQUIRED_VALIDATOR: StaticProvider = {
* @description
* A directive that adds the `required` validator to any controls marked with the
* `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
*
*
* @see [Form Validation](guide/form-validation)
*
* @usageNotes
*
*
* ### Adding a required validator using template-driven forms
*
* ```
@ -159,16 +159,18 @@ export const CHECKBOX_REQUIRED_VALIDATOR: StaticProvider = {
})
export class RequiredValidator implements Validator {
// TODO(issue/24571): remove '!'.
private _required !: boolean;
private _required!: boolean;
// TODO(issue/24571): remove '!'.
private _onChange !: () => void;
private _onChange!: () => void;
/**
* @description
* Tracks changes to the required attribute bound to this directive.
*/
@Input()
get required(): boolean|string { return this._required; }
get required(): boolean|string {
return this._required;
}
set required(value: boolean|string) {
this._required = value != null && value !== false && `${value}` !== 'false';
@ -190,22 +192,25 @@ export class RequiredValidator implements Validator {
*
* @param fn The callback function
*/
registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
registerOnValidatorChange(fn: () => void): void {
this._onChange = fn;
}
}
/**
* A Directive that adds the `required` validator to checkbox controls marked with the
* `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
*
*
* @see [Form Validation](guide/form-validation)
*
* @usageNotes
*
*
* ### Adding a required checkbox validator using template-driven forms
*
* The following example shows how to add a checkbox required validator to an input attached to an ngModel binding.
*
* The following example shows how to add a checkbox required validator to an input attached to an
* ngModel binding.
*
* ```
* <input type="checkbox" name="active" ngModel required>
* ```
@ -248,11 +253,12 @@ export const EMAIL_VALIDATOR: any = {
* @see [Form Validation](guide/form-validation)
*
* @usageNotes
*
*
* ### Adding an email validator
*
* The following example shows how to add an email validator to an input attached to an ngModel binding.
*
* The following example shows how to add an email validator to an input attached to an ngModel
* binding.
*
* ```
* <input type="email" name="email" ngModel email>
* <input type="email" name="email" ngModel email="true">
@ -269,9 +275,9 @@ export const EMAIL_VALIDATOR: any = {
})
export class EmailValidator implements Validator {
// TODO(issue/24571): remove '!'.
private _enabled !: boolean;
private _enabled!: boolean;
// TODO(issue/24571): remove '!'.
private _onChange !: () => void;
private _onChange!: () => void;
/**
* @description
@ -298,7 +304,9 @@ export class EmailValidator implements Validator {
*
* @param fn The callback function
*/
registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
registerOnValidatorChange(fn: () => void): void {
this._onChange = fn;
}
}
/**
@ -308,7 +316,9 @@ export class EmailValidator implements Validator {
*
* @publicApi
*/
export interface ValidatorFn { (control: AbstractControl): ValidationErrors|null; }
export interface ValidatorFn {
(control: AbstractControl): ValidationErrors|null;
}
/**
* @description
@ -334,7 +344,7 @@ export const MIN_LENGTH_VALIDATOR: any = {
/**
* A directive that adds minimum length validation to controls marked with the
* `minlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
*
*
* @see [Form Validation](guide/form-validation)
*
* @usageNotes
@ -357,19 +367,18 @@ export const MIN_LENGTH_VALIDATOR: any = {
providers: [MIN_LENGTH_VALIDATOR],
host: {'[attr.minlength]': 'minlength ? minlength : null'}
})
export class MinLengthValidator implements Validator,
OnChanges {
export class MinLengthValidator implements Validator, OnChanges {
// TODO(issue/24571): remove '!'.
private _validator !: ValidatorFn;
private _validator!: ValidatorFn;
// TODO(issue/24571): remove '!'.
private _onChange !: () => void;
private _onChange!: () => void;
/**
* @description
* Tracks changes to the the minimum length bound to this directive.
*/
// TODO(issue/24571): remove '!'.
@Input() minlength !: string | number;
@Input() minlength!: string|number;
/**
* @description
@ -400,7 +409,9 @@ export class MinLengthValidator implements Validator,
*
* @param fn The callback function
*/
registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
registerOnValidatorChange(fn: () => void): void {
this._onChange = fn;
}
private _createValidator(): void {
this._validator = Validators.minLength(
@ -421,7 +432,7 @@ export const MAX_LENGTH_VALIDATOR: any = {
/**
* A directive that adds max length validation to controls marked with the
* `maxlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
*
*
* @see [Form Validation](guide/form-validation)
*
* @usageNotes
@ -444,19 +455,18 @@ export const MAX_LENGTH_VALIDATOR: any = {
providers: [MAX_LENGTH_VALIDATOR],
host: {'[attr.maxlength]': 'maxlength ? maxlength : null'}
})
export class MaxLengthValidator implements Validator,
OnChanges {
export class MaxLengthValidator implements Validator, OnChanges {
// TODO(issue/24571): remove '!'.
private _validator !: ValidatorFn;
private _validator!: ValidatorFn;
// TODO(issue/24571): remove '!'.
private _onChange !: () => void;
private _onChange!: () => void;
/**
* @description
* Tracks changes to the the maximum length bound to this directive.
*/
// TODO(issue/24571): remove '!'.
@Input() maxlength !: string | number;
@Input() maxlength!: string|number;
/**
* @description
@ -487,7 +497,9 @@ export class MaxLengthValidator implements Validator,
*
* @param fn The callback function
*/
registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
registerOnValidatorChange(fn: () => void): void {
this._onChange = fn;
}
private _createValidator(): void {
this._validator = Validators.maxLength(
@ -511,7 +523,7 @@ export const PATTERN_VALIDATOR: any = {
* A directive that adds regex pattern validation to controls marked with the
* `pattern` attribute. The regex must match the entire control value.
* The directive is provided with the `NG_VALIDATORS` multi-provider list.
*
*
* @see [Form Validation](guide/form-validation)
*
* @usageNotes
@ -524,7 +536,7 @@ export const PATTERN_VALIDATOR: any = {
* ```html
* <input name="firstName" ngModel pattern="[a-zA-Z ]*">
* ```
*
*
* @ngModule ReactiveFormsModule
* @ngModule FormsModule
* @publicApi
@ -534,19 +546,18 @@ export const PATTERN_VALIDATOR: any = {
providers: [PATTERN_VALIDATOR],
host: {'[attr.pattern]': 'pattern ? pattern : null'}
})
export class PatternValidator implements Validator,
OnChanges {
export class PatternValidator implements Validator, OnChanges {
// TODO(issue/24571): remove '!'.
private _validator !: ValidatorFn;
private _validator!: ValidatorFn;
// TODO(issue/24571): remove '!'.
private _onChange !: () => void;
private _onChange!: () => void;
/**
* @description
* Tracks changes to the pattern bound to this directive.
*/
// TODO(issue/24571): remove '!'.
@Input() pattern !: string | RegExp;
@Input() pattern!: string|RegExp;
/**
* @description
@ -567,7 +578,9 @@ export class PatternValidator implements Validator,
* Method that validates whether the value matches the
* the pattern requirement.
*/
validate(control: AbstractControl): ValidationErrors|null { return this._validator(control); }
validate(control: AbstractControl): ValidationErrors|null {
return this._validator(control);
}
/**
* @description
@ -575,7 +588,11 @@ export class PatternValidator implements Validator,
*
* @param fn The callback function
*/
registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
registerOnValidatorChange(fn: () => void): void {
this._onChange = fn;
}
private _createValidator(): void { this._validator = Validators.pattern(this.pattern); }
private _createValidator(): void {
this._validator = Validators.pattern(this.pattern);
}
}

4
packages/forms/src/form_builder.ts
View File

@ -11,8 +11,8 @@ import {Injectable} from '@angular/core';
import {AsyncValidatorFn, ValidatorFn} from './directives/validators';
import {AbstractControl, AbstractControlOptions, FormArray, FormControl, FormGroup, FormHooks} from './model';
function isAbstractControlOptions(options: AbstractControlOptions | {[key: string]: any}):
options is AbstractControlOptions {
function isAbstractControlOptions(options: AbstractControlOptions|
{[key: string]: any}): options is AbstractControlOptions {
return (<AbstractControlOptions>options).asyncValidators !== undefined ||
(<AbstractControlOptions>options).validators !== undefined ||
(<AbstractControlOptions>options).updateOn !== undefined;

9
packages/forms/src/form_providers.ts
View File

@ -52,14 +52,13 @@ export class ReactiveFormsModule {
* binding is used with reactive form directives.
*/
static withConfig(opts: {
/** @deprecated as of v6 */ warnOnNgModelWithFormControl: 'never' | 'once' | 'always'
/** @deprecated as of v6 */ warnOnNgModelWithFormControl: 'never'|'once'|'always'
}): ModuleWithProviders<ReactiveFormsModule> {
return {
ngModule: ReactiveFormsModule,
providers: [{
provide: NG_MODEL_WITH_FORM_CONTROL_WARNING,
useValue: opts.warnOnNgModelWithFormControl
}]
providers: [
{provide: NG_MODEL_WITH_FORM_CONTROL_WARNING, useValue: opts.warnOnNgModelWithFormControl}
]
};
}
}

262
packages/forms/src/model.ts
View File

@ -44,7 +44,7 @@ export const PENDING = 'PENDING';
*/
export const DISABLED = 'DISABLED';
function _find(control: AbstractControl, path: Array<string|number>| string, delimiter: string) {
function _find(control: AbstractControl, path: Array<string|number>|string, delimiter: string) {
if (path == null) return null;
if (!Array.isArray(path)) {
@ -55,7 +55,7 @@ function _find(control: AbstractControl, path: Array<string|number>| string, del
// Not using Array.reduce here due to a Chrome 80 bug
// https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
let controlToFind: AbstractControl|null = control;
path.forEach((name: string | number) => {
path.forEach((name: string|number) => {
if (controlToFind instanceof FormGroup) {
controlToFind = controlToFind.controls.hasOwnProperty(name as string) ?
controlToFind.controls[name] :
@ -69,9 +69,8 @@ function _find(control: AbstractControl, path: Array<string|number>| string, del
return controlToFind;
}
function coerceToValidator(
validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null): ValidatorFn|
null {
function coerceToValidator(validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|
null): ValidatorFn|null {
const validator =
(isOptionsObj(validatorOrOpts) ? (validatorOrOpts as AbstractControlOptions).validators :
validatorOrOpts) as ValidatorFn |
@ -81,8 +80,9 @@ function coerceToValidator(
}
function coerceToAsyncValidator(
asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null, validatorOrOpts?: ValidatorFn |
ValidatorFn[] | AbstractControlOptions | null): AsyncValidatorFn|null {
asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null,
validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null): AsyncValidatorFn|
null {
const origAsyncValidator =
(isOptionsObj(validatorOrOpts) ? (validatorOrOpts as AbstractControlOptions).asyncValidators :
asyncValidator) as AsyncValidatorFn |
@ -92,7 +92,7 @@ function coerceToAsyncValidator(
origAsyncValidator || null;
}
export type FormHooks = 'change' | 'blur' | 'submit';
export type FormHooks = 'change'|'blur'|'submit';
/**
* Interface for options provided to an `AbstractControl`.
@ -118,8 +118,8 @@ export interface AbstractControlOptions {
}
function isOptionsObj(
validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null): boolean {
function isOptionsObj(validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|
null): boolean {
return validatorOrOpts != null && !Array.isArray(validatorOrOpts) &&
typeof validatorOrOpts === 'object';
}
@ -142,21 +142,21 @@ function isOptionsObj(
export abstract class AbstractControl {
/** @internal */
// TODO(issue/24571): remove '!'.
_pendingDirty !: boolean;
_pendingDirty!: boolean;
/** @internal */
// TODO(issue/24571): remove '!'.
_pendingTouched !: boolean;
_pendingTouched!: boolean;
/** @internal */
_onCollectionChange = () => {};
/** @internal */
// TODO(issue/24571): remove '!'.
_updateOn !: FormHooks;
_updateOn!: FormHooks;
// TODO(issue/24571): remove '!'.
private _parent !: FormGroup | FormArray;
private _parent!: FormGroup|FormArray;
private _asyncValidationSubscription: any;
/**
@ -184,7 +184,9 @@ export abstract class AbstractControl {
/**
* The parent control.
*/
get parent(): FormGroup|FormArray { return this._parent; }
get parent(): FormGroup|FormArray {
return this._parent;
}
/**
* The validation status of the control. There are four possible
@ -199,7 +201,7 @@ export abstract class AbstractControl {
* both valid AND invalid or invalid AND disabled.
*/
// TODO(issue/24571): remove '!'.
public readonly status !: string;
public readonly status!: string;
/**
* A control is `valid` when its `status` is `VALID`.
@ -209,7 +211,9 @@ export abstract class AbstractControl {
* @returns True if the control has passed all of its validation tests,
* false otherwise.
*/
get valid(): boolean { return this.status === VALID; }
get valid(): boolean {
return this.status === VALID;
}
/**
* A control is `invalid` when its `status` is `INVALID`.
@ -219,7 +223,9 @@ export abstract class AbstractControl {
* @returns True if this control has failed one or more of its validation checks,
* false otherwise.
*/
get invalid(): boolean { return this.status === INVALID; }
get invalid(): boolean {
return this.status === INVALID;
}
/**
* A control is `pending` when its `status` is `PENDING`.
@ -229,7 +235,9 @@ export abstract class AbstractControl {
* @returns True if this control is in the process of conducting a validation check,
* false otherwise.
*/
get pending(): boolean { return this.status == PENDING; }
get pending(): boolean {
return this.status == PENDING;
}
/**
* A control is `disabled` when its `status` is `DISABLED`.
@ -242,7 +250,9 @@ export abstract class AbstractControl {
*
* @returns True if the control is disabled, false otherwise.
*/
get disabled(): boolean { return this.status === DISABLED; }
get disabled(): boolean {
return this.status === DISABLED;
}
/**
* A control is `enabled` as long as its `status` is not `DISABLED`.
@ -253,14 +263,16 @@ export abstract class AbstractControl {
* @see {@link AbstractControl.status}
*
*/
get enabled(): boolean { return this.status !== DISABLED; }
get enabled(): boolean {
return this.status !== DISABLED;
}
/**
* An object containing any errors generated by failing validation,
* or null if there are no errors.
*/
// TODO(issue/24571): remove '!'.
public readonly errors !: ValidationErrors | null;
public readonly errors!: ValidationErrors|null;
/**
* A control is `pristine` if the user has not yet changed
@ -278,7 +290,9 @@ export abstract class AbstractControl {
* @returns True if the user has changed the value of this control in the UI; compare `pristine`.
* Programmatic changes to a control's value do not mark it dirty.
*/
get dirty(): boolean { return !this.pristine; }
get dirty(): boolean {
return !this.pristine;
}
/**
* True if the control is marked as `touched`.
@ -294,7 +308,9 @@ export abstract class AbstractControl {
* A control is `untouched` if the user has not yet triggered
* a `blur` event on it.
*/
get untouched(): boolean { return !this.touched; }
get untouched(): boolean {
return !this.touched;
}
/**
* A multicasting observable that emits an event every time the value of the control changes, in
@ -302,7 +318,7 @@ export abstract class AbstractControl {
* without passing along {emitEvent: false} as a function argument.
*/
// TODO(issue/24571): remove '!'.
public readonly valueChanges !: Observable<any>;
public readonly valueChanges!: Observable<any>;
/**
* A multicasting observable that emits an event every time the validation `status` of the control
@ -312,7 +328,7 @@ export abstract class AbstractControl {
*
*/
// TODO(issue/24571): remove '!'.
public readonly statusChanges !: Observable<any>;
public readonly statusChanges!: Observable<any>;
/**
* Reports the update strategy of the `AbstractControl` (meaning
@ -355,7 +371,9 @@ export abstract class AbstractControl {
* `updateValueAndValidity()` for the new validation to take effect.
*
*/
clearValidators(): void { this.validator = null; }
clearValidators(): void {
this.validator = null;
}
/**
* Empties out the async validator list.
@ -364,7 +382,9 @@ export abstract class AbstractControl {
* `updateValueAndValidity()` for the new validation to take effect.
*
*/
clearAsyncValidators(): void { this.asyncValidator = null; }
clearAsyncValidators(): void {
this.asyncValidator = null;
}
/**
* Marks the control as `touched`. A control is touched by focus and
@ -380,7 +400,7 @@ export abstract class AbstractControl {
* marks all direct ancestors. Default is false.
*/
markAsTouched(opts: {onlySelf?: boolean} = {}): void {
(this as{touched: boolean}).touched = true;
(this as {touched: boolean}).touched = true;
if (this._parent && !opts.onlySelf) {
this._parent.markAsTouched(opts);
@ -413,11 +433,12 @@ export abstract class AbstractControl {
* marks all direct ancestors. Default is false.
*/
markAsUntouched(opts: {onlySelf?: boolean} = {}): void {
(this as{touched: boolean}).touched = false;
(this as {touched: boolean}).touched = false;
this._pendingTouched = false;
this._forEachChild(
(control: AbstractControl) => { control.markAsUntouched({onlySelf: true}); });
this._forEachChild((control: AbstractControl) => {
control.markAsUntouched({onlySelf: true});
});
if (this._parent && !opts.onlySelf) {
this._parent._updateTouched(opts);
@ -438,7 +459,7 @@ export abstract class AbstractControl {
* marks all direct ancestors. Default is false.
*/
markAsDirty(opts: {onlySelf?: boolean} = {}): void {
(this as{pristine: boolean}).pristine = false;
(this as {pristine: boolean}).pristine = false;
if (this._parent && !opts.onlySelf) {
this._parent.markAsDirty(opts);
@ -462,10 +483,12 @@ export abstract class AbstractControl {
* marks all direct ancestors. Default is false..
*/
markAsPristine(opts: {onlySelf?: boolean} = {}): void {
(this as{pristine: boolean}).pristine = true;
(this as {pristine: boolean}).pristine = true;
this._pendingDirty = false;
this._forEachChild((control: AbstractControl) => { control.markAsPristine({onlySelf: true}); });
this._forEachChild((control: AbstractControl) => {
control.markAsPristine({onlySelf: true});
});
if (this._parent && !opts.onlySelf) {
this._parent._updatePristine(opts);
@ -489,7 +512,7 @@ export abstract class AbstractControl {
*
*/
markAsPending(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
(this as{status: string}).status = PENDING;
(this as {status: string}).status = PENDING;
if (opts.emitEvent !== false) {
(this.statusChanges as EventEmitter<any>).emit(this.status);
@ -522,10 +545,11 @@ export abstract class AbstractControl {
// parent's dirtiness based on the children.
const skipPristineCheck = this._parentMarkedDirty(opts.onlySelf);
(this as{status: string}).status = DISABLED;
(this as{errors: ValidationErrors | null}).errors = null;
this._forEachChild(
(control: AbstractControl) => { control.disable({...opts, onlySelf: true}); });
(this as {status: string}).status = DISABLED;
(this as {errors: ValidationErrors | null}).errors = null;
this._forEachChild((control: AbstractControl) => {
control.disable({...opts, onlySelf: true});
});
this._updateValue();
if (opts.emitEvent !== false) {
@ -560,9 +584,10 @@ export abstract class AbstractControl {
// parent's dirtiness based on the children.
const skipPristineCheck = this._parentMarkedDirty(opts.onlySelf);
(this as{status: string}).status = VALID;
this._forEachChild(
(control: AbstractControl) => { control.enable({...opts, onlySelf: true}); });
(this as {status: string}).status = VALID;
this._forEachChild((control: AbstractControl) => {
control.enable({...opts, onlySelf: true});
});
this.updateValueAndValidity({onlySelf: true, emitEvent: opts.emitEvent});
this._updateAncestors({...opts, skipPristineCheck});
@ -583,7 +608,9 @@ export abstract class AbstractControl {
/**
* @param parent Sets the parent of the control
*/
setParent(parent: FormGroup|FormArray): void { this._parent = parent; }
setParent(parent: FormGroup|FormArray): void {
this._parent = parent;
}
/**
* Sets the value of the control. Abstract method (implemented in sub-classes).
@ -620,8 +647,8 @@ export abstract class AbstractControl {
if (this.enabled) {
this._cancelExistingSubscription();
(this as{errors: ValidationErrors | null}).errors = this._runValidator();
(this as{status: string}).status = this._calculateStatus();
(this as {errors: ValidationErrors | null}).errors = this._runValidator();
(this as {status: string}).status = this._calculateStatus();
if (this.status === VALID || this.status === PENDING) {
this._runAsyncValidator(opts.emitEvent);
@ -645,7 +672,7 @@ export abstract class AbstractControl {
}
private _setInitialStatus() {
(this as{status: string}).status = this._allControlsDisabled() ? DISABLED : VALID;
(this as {status: string}).status = this._allControlsDisabled() ? DISABLED : VALID;
}
private _runValidator(): ValidationErrors|null {
@ -654,10 +681,10 @@ export abstract class AbstractControl {
private _runAsyncValidator(emitEvent?: boolean): void {
if (this.asyncValidator) {
(this as{status: string}).status = PENDING;
(this as {status: string}).status = PENDING;
const obs = toObservable(this.asyncValidator(this));
this._asyncValidationSubscription =
obs.subscribe((errors: ValidationErrors | null) => this.setErrors(errors, {emitEvent}));
obs.subscribe((errors: ValidationErrors|null) => this.setErrors(errors, {emitEvent}));
}
}
@ -690,7 +717,7 @@ export abstract class AbstractControl {
* ```
*/
setErrors(errors: ValidationErrors|null, opts: {emitEvent?: boolean} = {}): void {
(this as{errors: ValidationErrors | null}).errors = errors;
(this as {errors: ValidationErrors | null}).errors = errors;
this._updateControlsErrors(opts.emitEvent !== false);
}
@ -711,7 +738,9 @@ export abstract class AbstractControl {
*
* * `this.form.get(['person', 'name']);`
*/
get(path: Array<string|number>|string): AbstractControl|null { return _find(this, path, '.'); }
get(path: Array<string|number>|string): AbstractControl|null {
return _find(this, path, '.');
}
/**
* @description
@ -794,7 +823,7 @@ export abstract class AbstractControl {
/** @internal */
_updateControlsErrors(emitEvent: boolean): void {
(this as{status: string}).status = this._calculateStatus();
(this as {status: string}).status = this._calculateStatus();
if (emitEvent) {
(this.statusChanges as EventEmitter<string>).emit(this.status);
@ -807,8 +836,8 @@ export abstract class AbstractControl {
/** @internal */
_initObservables() {
(this as{valueChanges: Observable<any>}).valueChanges = new EventEmitter();
(this as{statusChanges: Observable<any>}).statusChanges = new EventEmitter();
(this as {valueChanges: Observable<any>}).valueChanges = new EventEmitter();
(this as {statusChanges: Observable<any>}).statusChanges = new EventEmitter();
}
@ -852,7 +881,7 @@ export abstract class AbstractControl {
/** @internal */
_updatePristine(opts: {onlySelf?: boolean} = {}): void {
(this as{pristine: boolean}).pristine = !this._anyControlsDirty();
(this as {pristine: boolean}).pristine = !this._anyControlsDirty();
if (this._parent && !opts.onlySelf) {
this._parent._updatePristine(opts);
@ -861,7 +890,7 @@ export abstract class AbstractControl {
/** @internal */
_updateTouched(opts: {onlySelf?: boolean} = {}): void {
(this as{touched: boolean}).touched = this._anyControlsTouched();
(this as {touched: boolean}).touched = this._anyControlsTouched();
if (this._parent && !opts.onlySelf) {
this._parent._updateTouched(opts);
@ -878,12 +907,14 @@ export abstract class AbstractControl {
}
/** @internal */
_registerOnCollectionChange(fn: () => void): void { this._onCollectionChange = fn; }
_registerOnCollectionChange(fn: () => void): void {
this._onCollectionChange = fn;
}
/** @internal */
_setUpdateStrategy(opts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null): void {
if (isOptionsObj(opts) && (opts as AbstractControlOptions).updateOn != null) {
this._updateOn = (opts as AbstractControlOptions).updateOn !;
this._updateOn = (opts as AbstractControlOptions).updateOn!;
}
}
@ -1006,18 +1037,18 @@ export class FormControl extends AbstractControl {
_pendingChange: any;
/**
* Creates a new `FormControl` instance.
*
* @param formState Initializes the control with an initial value,
* or an object that defines the initial value and disabled state.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
* Creates a new `FormControl` instance.
*
* @param formState Initializes the control with an initial value,
* or an object that defines the initial value and disabled state.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
constructor(
formState: any = null,
validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null,
@ -1060,7 +1091,7 @@ export class FormControl extends AbstractControl {
emitModelToViewChange?: boolean,
emitViewToModelChange?: boolean
} = {}): void {
(this as{value: any}).value = this._pendingValue = value;
(this as {value: any}).value = this._pendingValue = value;
if (this._onChange.length && options.emitModelToViewChange !== false) {
this._onChange.forEach(
(changeFn) => changeFn(this.value, options.emitViewToModelChange !== false));
@ -1120,19 +1151,25 @@ export class FormControl extends AbstractControl {
/**
* @internal
*/
_anyControls(condition: Function): boolean { return false; }
_anyControls(condition: Function): boolean {
return false;
}
/**
* @internal
*/
_allControlsDisabled(): boolean { return this.disabled; }
_allControlsDisabled(): boolean {
return this.disabled;
}
/**
* Register a listener for change events.
*
* @param fn The method that is called when the value changes
*/
registerOnChange(fn: Function): void { this._onChange.push(fn); }
registerOnChange(fn: Function): void {
this._onChange.push(fn);
}
/**
* @internal
@ -1172,11 +1209,11 @@ export class FormControl extends AbstractControl {
private _applyFormState(formState: any) {
if (this._isBoxedValue(formState)) {
(this as{value: any}).value = this._pendingValue = formState.value;
(this as {value: any}).value = this._pendingValue = formState.value;
formState.disabled ? this.disable({onlySelf: true, emitEvent: false}) :
this.enable({onlySelf: true, emitEvent: false});
} else {
(this as{value: any}).value = this._pendingValue = formState;
(this as {value: any}).value = this._pendingValue = formState;
}
}
}
@ -1255,18 +1292,18 @@ export class FormControl extends AbstractControl {
*/
export class FormGroup extends AbstractControl {
/**
* Creates a new `FormGroup` instance.
*
* @param controls A collection of child controls. The key for each child is the name
* under which it is registered.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
* Creates a new `FormGroup` instance.
*
* @param controls A collection of child controls. The key for each child is the name
* under which it is registered.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
constructor(
public controls: {[key: string]: AbstractControl},
validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null,
@ -1556,7 +1593,9 @@ export class FormGroup extends AbstractControl {
}
/** @internal */
_updateValue(): void { (this as{value: any}).value = this._reduceValue(); }
_updateValue(): void {
(this as {value: any}).value = this._reduceValue();
}
/** @internal */
_anyControls(condition: Function): boolean {
@ -1581,8 +1620,9 @@ export class FormGroup extends AbstractControl {
/** @internal */
_reduceChildren(initValue: any, fn: Function) {
let res = initValue;
this._forEachChild(
(control: AbstractControl, name: string) => { res = fn(res, control, name); });
this._forEachChild((control: AbstractControl, name: string) => {
res = fn(res, control, name);
});
return res;
}
@ -1647,7 +1687,7 @@ export class FormGroup extends AbstractControl {
* ], {validators: myValidator, asyncValidators: myAsyncValidator});
* ```
*
* ### Set the updateOn property for all controls in a form array
* ### Set the updateOn property for all controls in a form array
*
* The options object is used to set a default value for each child
* control's `updateOn` property. If you set `updateOn` to `'blur'` at the
@ -1672,18 +1712,18 @@ export class FormGroup extends AbstractControl {
*/
export class FormArray extends AbstractControl {
/**
* Creates a new `FormArray` instance.
*
* @param controls An array of child controls. Each child control is given an index
* where it is registered.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
* Creates a new `FormArray` instance.
*
* @param controls An array of child controls. Each child control is given an index
* where it is registered.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
constructor(
public controls: AbstractControl[],
validatorOrOpts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null,
@ -1702,7 +1742,9 @@ export class FormArray extends AbstractControl {
*
* @param index Index in the array to retrieve the control
*/
at(index: number): AbstractControl { return this.controls[index]; }
at(index: number): AbstractControl {
return this.controls[index];
}
/**
* Insert a new `AbstractControl` at the end of the array.
@ -1762,7 +1804,9 @@ export class FormArray extends AbstractControl {
/**
* Length of the control array.
*/
get length(): number { return this.controls.length; }
get length(): number {
return this.controls.length;
}
/**
* Sets the value of the `FormArray`. It accepts an array that matches
@ -1979,12 +2023,14 @@ export class FormArray extends AbstractControl {
/** @internal */
_forEachChild(cb: Function): void {
this.controls.forEach((control: AbstractControl, index: number) => { cb(control, index); });
this.controls.forEach((control: AbstractControl, index: number) => {
cb(control, index);
});
}
/** @internal */
_updateValue(): void {
(this as{value: any}).value =
(this as {value: any}).value =
this.controls.filter((control) => control.enabled || this.disabled)
.map((control) => control.value);
}

37
packages/forms/src/validators.ts
View File

@ -7,8 +7,9 @@
*/
import {InjectionToken, ɵisObservable as isObservable, ɵisPromise as isPromise} from '@angular/core';
import {Observable, forkJoin, from} from 'rxjs';
import {forkJoin, from, Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {AsyncValidatorFn, ValidationErrors, Validator, ValidatorFn} from './directives/validators';
import {AbstractControl, FormControl} from './model';
@ -19,7 +20,8 @@ function isEmptyInputValue(value: any): boolean {
/**
* @description
* An `InjectionToken` for registering additional synchronous validators used with `AbstractControl`s.
* An `InjectionToken` for registering additional synchronous validators used with
* `AbstractControl`s.
*
* @see `NG_ASYNC_VALIDATORS`
*
@ -48,7 +50,8 @@ export const NG_VALIDATORS = new InjectionToken<Array<Validator|Function>>('NgVa
/**
* @description
* An `InjectionToken` for registering additional asynchronous validators used with `AbstractControl`s.
* An `InjectionToken` for registering additional asynchronous validators used with
* `AbstractControl`s.
*
* @see `NG_VALIDATORS`
*
@ -124,7 +127,7 @@ export class Validators {
*
*/
static min(min: number): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
return (control: AbstractControl): ValidationErrors|null => {
if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {
return null; // don't validate empty values to allow optional controls
}
@ -157,7 +160,7 @@ export class Validators {
*
*/
static max(max: number): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
return (control: AbstractControl): ValidationErrors|null => {
if (isEmptyInputValue(control.value) || isEmptyInputValue(max)) {
return null; // don't validate empty values to allow optional controls
}
@ -221,11 +224,13 @@ export class Validators {
* @description
* Validator that requires the control's value pass an email validation test.
*
* Tests the value using a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
* Tests the value using a [regular
* expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
* pattern suitable for common usecases. The pattern is based on the definition of a valid email
* address in the [WHATWG HTML specification](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address)
* with some enhancements to incorporate more RFC rules (such as rules related to domain names and
* the lengths of different parts of the address).
* address in the [WHATWG HTML
* specification](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address) with
* some enhancements to incorporate more RFC rules (such as rules related to domain names and the
* lengths of different parts of the address).
*
* The differences from the WHATWG version include:
* - Disallow `local-part` (the part before the `@` symbol) to begin or end with a period (`.`).
@ -285,7 +290,7 @@ export class Validators {
*
*/
static minLength(minLength: number): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
return (control: AbstractControl): ValidationErrors|null => {
if (isEmptyInputValue(control.value)) {
return null; // don't validate empty values to allow optional controls
}
@ -323,7 +328,7 @@ export class Validators {
*
*/
static maxLength(maxLength: number): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
return (control: AbstractControl): ValidationErrors|null => {
const length: number = control.value ? control.value.length : 0;
return length > maxLength ?
{'maxlength': {'requiredLength': maxLength, 'actualLength': length}} :
@ -379,7 +384,7 @@ export class Validators {
regexStr = pattern.toString();
regex = pattern;
}
return (control: AbstractControl): ValidationErrors | null => {
return (control: AbstractControl): ValidationErrors|null => {
if (isEmptyInputValue(control.value)) {
return null; // don't validate empty values to allow optional controls
}
@ -396,7 +401,9 @@ export class Validators {
* @see `updateValueAndValidity()`
*
*/
static nullValidator(control: AbstractControl): ValidationErrors|null { return null; }
static nullValidator(control: AbstractControl): ValidationErrors|null {
return null;
}
/**
* @description
@ -469,8 +476,8 @@ function _mergeErrors(arrayOfErrors: ValidationErrors[]): ValidationErrors|null
// Not using Array.reduce here due to a Chrome 80 bug
// https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
arrayOfErrors.forEach((errors: ValidationErrors | null) => {
res = errors != null ? {...res !, ...errors} : res !;
arrayOfErrors.forEach((errors: ValidationErrors|null) => {
res = errors != null ? {...res!, ...errors} : res!;
});
return Object.keys(res).length === 0 ? null : res;

92
packages/forms/test/directives_spec.ts
View File

@ -19,22 +19,30 @@ class DummyControlValueAccessor implements ControlValueAccessor {
registerOnChange(fn: any) {}
registerOnTouched(fn: any) {}
writeValue(obj: any): void { this.writtenValue = obj; }
writeValue(obj: any): void {
this.writtenValue = obj;
}
}
class CustomValidatorDirective implements Validator {
validate(c: FormControl): ValidationErrors { return {'custom': true}; }
validate(c: FormControl): ValidationErrors {
return {'custom': true};
}
}
function asyncValidator(expected: any, timeout = 0) {
return (c: AbstractControl): any => {
let resolve: (result: any) => void = undefined !;
const promise = new Promise(res => { resolve = res; });
let resolve: (result: any) => void = undefined!;
const promise = new Promise(res => {
resolve = res;
});
const res = c.value != expected ? {'async': true} : null;
if (timeout == 0) {
resolve(res);
} else {
setTimeout(() => { resolve(res); }, timeout);
setTimeout(() => {
resolve(res);
}, timeout);
}
return promise;
};
@ -44,16 +52,21 @@ function asyncValidator(expected: any, timeout = 0) {
describe('Form Directives', () => {
let defaultAccessor: DefaultValueAccessor;
beforeEach(() => { defaultAccessor = new DefaultValueAccessor(null !, null !, null !); });
beforeEach(() => {
defaultAccessor = new DefaultValueAccessor(null!, null!, null!);
});
describe('shared', () => {
describe('selectValueAccessor', () => {
let dir: NgControl;
beforeEach(() => { dir = <any>new SpyNgControl(); });
beforeEach(() => {
dir = <any>new SpyNgControl();
});
it('should throw when given an empty array',
() => { expect(() => selectValueAccessor(dir, [])).toThrowError(); });
it('should throw when given an empty array', () => {
expect(() => selectValueAccessor(dir, [])).toThrowError();
});
it('should throw when accessor is not provided as array', () => {
expect(() => selectValueAccessor(dir, {} as any[]))
@ -61,49 +74,51 @@ function asyncValidator(expected: any, timeout = 0) {
`Value accessor was not provided as an array for form control with unspecified name attribute`);
});
it('should return the default value accessor when no other provided',
() => { expect(selectValueAccessor(dir, [defaultAccessor])).toEqual(defaultAccessor); });
it('should return the default value accessor when no other provided', () => {
expect(selectValueAccessor(dir, [defaultAccessor])).toEqual(defaultAccessor);
});
it('should return checkbox accessor when provided', () => {
const checkboxAccessor = new CheckboxControlValueAccessor(null !, null !);
const checkboxAccessor = new CheckboxControlValueAccessor(null!, null!);
expect(selectValueAccessor(dir, [
defaultAccessor, checkboxAccessor
])).toEqual(checkboxAccessor);
});
it('should return select accessor when provided', () => {
const selectAccessor = new SelectControlValueAccessor(null !, null !);
const selectAccessor = new SelectControlValueAccessor(null!, null!);
expect(selectValueAccessor(dir, [
defaultAccessor, selectAccessor
])).toEqual(selectAccessor);
});
it('should return select multiple accessor when provided', () => {
const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null !, null !);
const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null!, null!);
expect(selectValueAccessor(dir, [
defaultAccessor, selectMultipleAccessor
])).toEqual(selectMultipleAccessor);
});
it('should throw when more than one build-in accessor is provided', () => {
const checkboxAccessor = new CheckboxControlValueAccessor(null !, null !);
const selectAccessor = new SelectControlValueAccessor(null !, null !);
const checkboxAccessor = new CheckboxControlValueAccessor(null!, null!);
const selectAccessor = new SelectControlValueAccessor(null!, null!);
expect(() => selectValueAccessor(dir, [checkboxAccessor, selectAccessor])).toThrowError();
});
it('should return custom accessor when provided', () => {
const customAccessor: ControlValueAccessor = new SpyValueAccessor() as any;
const checkboxAccessor = new CheckboxControlValueAccessor(null !, null !);
expect(selectValueAccessor(dir, <any>[defaultAccessor, customAccessor, checkboxAccessor]))
.toEqual(customAccessor);
const checkboxAccessor = new CheckboxControlValueAccessor(null!, null!);
expect(selectValueAccessor(dir, <any>[
defaultAccessor, customAccessor, checkboxAccessor
])).toEqual(customAccessor);
});
it('should return custom accessor when provided with select multiple', () => {
const customAccessor: ControlValueAccessor = new SpyValueAccessor() as any;
const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null !, null !);
expect(selectValueAccessor(
dir, <any>[defaultAccessor, customAccessor, selectMultipleAccessor]))
.toEqual(customAccessor);
const selectMultipleAccessor = new SelectMultipleControlValueAccessor(null!, null!);
expect(selectValueAccessor(dir, <any>[
defaultAccessor, customAccessor, selectMultipleAccessor
])).toEqual(customAccessor);
});
it('should throw when more than one custom accessor is provided', () => {
@ -116,13 +131,13 @@ function asyncValidator(expected: any, timeout = 0) {
it('should compose functions', () => {
const dummy1 = (_: any /** TODO #9100 */) => ({'dummy1': true});
const dummy2 = (_: any /** TODO #9100 */) => ({'dummy2': true});
const v = composeValidators([dummy1, dummy2]) !;
const v = composeValidators([dummy1, dummy2])!;
expect(v(new FormControl(''))).toEqual({'dummy1': true, 'dummy2': true});
});
it('should compose validator directives', () => {
const dummy1 = (_: any /** TODO #9100 */) => ({'dummy1': true});
const v = composeValidators([dummy1, new CustomValidatorDirective()]) !;
const v = composeValidators([dummy1, new CustomValidatorDirective()])!;
expect(v(new FormControl(''))).toEqual({'dummy1': true, 'custom': true});
});
});
@ -137,8 +152,8 @@ function asyncValidator(expected: any, timeout = 0) {
form = new FormGroupDirective([], []);
formModel = new FormGroup({
'login': new FormControl(),
'passwords': new FormGroup(
{'password': new FormControl(), 'passwordConfirm': new FormControl()})
'passwords':
new FormGroup({'password': new FormControl(), 'passwordConfirm': new FormControl()})
});
form.form = formModel;
@ -174,7 +189,7 @@ function asyncValidator(expected: any, timeout = 0) {
describe('addControl', () => {
it('should throw when no control found', () => {
const dir = new FormControlName(form, null !, null !, [defaultAccessor], null);
const dir = new FormControlName(form, null!, null!, [defaultAccessor], null);
dir.name = 'invalidName';
expect(() => form.addControl(dir))
@ -182,7 +197,7 @@ function asyncValidator(expected: any, timeout = 0) {
});
it('should throw for a named control when no value accessor', () => {
const dir = new FormControlName(form, null !, null !, null !, null);
const dir = new FormControlName(form, null!, null!, null!, null);
dir.name = 'login';
expect(() => form.addControl(dir))
@ -190,8 +205,8 @@ function asyncValidator(expected: any, timeout = 0) {
});
it('should throw when no value accessor with path', () => {
const group = new FormGroupName(form, null !, null !);
const dir = new FormControlName(group, null !, null !, null !, null);
const group = new FormGroupName(form, null!, null!);
const dir = new FormControlName(group, null!, null!, null!, null);
group.name = 'passwords';
dir.name = 'password';
@ -321,7 +336,7 @@ function asyncValidator(expected: any, timeout = 0) {
personControlGroupDir = new NgModelGroup(form, [], []);
personControlGroupDir.name = 'person';
loginControlDir = new NgModel(personControlGroupDir, null !, null !, [defaultAccessor]);
loginControlDir = new NgModel(personControlGroupDir, null!, null!, [defaultAccessor]);
loginControlDir.name = 'login';
loginControlDir.valueAccessor = new DummyControlValueAccessor();
});
@ -509,7 +524,9 @@ function asyncValidator(expected: any, timeout = 0) {
controlDir.form = control;
});
it('should reexport control properties', () => { checkProperties(control); });
it('should reexport control properties', () => {
checkProperties(control);
});
it('should reexport control methods', () => {
expect(controlDir.hasError('required')).toBe(control.hasError('required'));
@ -544,7 +561,7 @@ function asyncValidator(expected: any, timeout = 0) {
beforeEach(() => {
ngModel = new NgModel(
null !, [Validators.required], [asyncValidator('expected')], [defaultAccessor]);
null!, [Validators.required], [asyncValidator('expected')], [defaultAccessor]);
ngModel.valueAccessor = new DummyControlValueAccessor();
control = ngModel.control;
});
@ -577,7 +594,7 @@ function asyncValidator(expected: any, timeout = 0) {
});
it('should throw when no value accessor with named control', () => {
const namedDir = new NgModel(null !, null !, null !, null !);
const namedDir = new NgModel(null!, null!, null!, null!);
namedDir.name = 'one';
expect(() => namedDir.ngOnChanges({}))
@ -585,7 +602,7 @@ function asyncValidator(expected: any, timeout = 0) {
});
it('should throw when no value accessor with unnamed control', () => {
const unnamedDir = new NgModel(null !, null !, null !, null !);
const unnamedDir = new NgModel(null!, null!, null!, null!);
expect(() => unnamedDir.ngOnChanges({}))
.toThrowError(
@ -641,7 +658,6 @@ function asyncValidator(expected: any, timeout = 0) {
ngModel.ngOnChanges({isDisabled: new SimpleChange(null, 'anything else', false)});
tick();
expect(ngModel.control.disabled).toEqual(true);
}));
});
@ -656,7 +672,7 @@ function asyncValidator(expected: any, timeout = 0) {
parent.form = new FormGroup({'name': formModel});
controlNameDir = new FormControlName(parent, [], [], [defaultAccessor], null);
controlNameDir.name = 'name';
(controlNameDir as{control: FormControl}).control = formModel;
(controlNameDir as {control: FormControl}).control = formModel;
});
it('should reexport control properties', () => {

2434
packages/forms/test/form_array_spec.ts
View File

File diff suppressed because it is too large Load Diff

345
packages/forms/test/form_builder_spec.ts
View File

@ -8,195 +8,208 @@
import {fakeAsync, tick} from '@angular/core/testing';
import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
import {FormBuilder, Validators} from '@angular/forms';
import {of } from 'rxjs';
import {of} from 'rxjs';
(function() {
function syncValidator(_: any /** TODO #9100 */): any /** TODO #9100 */ { return null; }
function asyncValidator(_: any /** TODO #9100 */) { return Promise.resolve(null); }
function syncValidator(_: any /** TODO #9100 */): any /** TODO #9100 */ {
return null;
}
function asyncValidator(_: any /** TODO #9100 */) {
return Promise.resolve(null);
}
describe('Form Builder', () => {
let b: FormBuilder;
describe('Form Builder', () => {
let b: FormBuilder;
beforeEach(() => { b = new FormBuilder(); });
beforeEach(() => {
b = new FormBuilder();
});
it('should create controls from a value', () => {
const g = b.group({'login': 'some value'});
it('should create controls from a value', () => {
const g = b.group({'login': 'some value'});
expect(g.controls['login'].value).toEqual('some value');
expect(g.controls['login'].value).toEqual('some value');
});
it('should create controls from a boxed value', () => {
const g = b.group({'login': {value: 'some value', disabled: true}});
expect(g.controls['login'].value).toEqual('some value');
expect(g.controls['login'].disabled).toEqual(true);
});
it('should create controls from an array', () => {
const g = b.group(
{'login': ['some value'], 'password': ['some value', syncValidator, asyncValidator]});
expect(g.controls['login'].value).toEqual('some value');
expect(g.controls['password'].value).toEqual('some value');
expect(g.controls['password'].validator).toEqual(syncValidator);
expect(g.controls['password'].asyncValidator).toEqual(asyncValidator);
});
it('should use controls whose form state is a primitive value', () => {
const g = b.group({'login': b.control('some value', syncValidator, asyncValidator)});
expect(g.controls['login'].value).toEqual('some value');
expect(g.controls['login'].validator).toBe(syncValidator);
expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
});
it('should support controls with no validators and whose form state is null', () => {
const g = b.group({'login': b.control(null)});
expect(g.controls['login'].value).toBeNull();
expect(g.controls['login'].validator).toBeNull();
expect(g.controls['login'].asyncValidator).toBeNull();
});
it('should support controls with validators and whose form state is null', () => {
const g = b.group({'login': b.control(null, syncValidator, asyncValidator)});
expect(g.controls['login'].value).toBeNull();
expect(g.controls['login'].validator).toBe(syncValidator);
expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
});
it('should support controls with no validators and whose form state is undefined', () => {
const g = b.group({'login': b.control(undefined)});
expect(g.controls['login'].value).toBeNull();
expect(g.controls['login'].validator).toBeNull();
expect(g.controls['login'].asyncValidator).toBeNull();
});
it('should support controls with validators and whose form state is undefined', () => {
const g = b.group({'login': b.control(undefined, syncValidator, asyncValidator)});
expect(g.controls['login'].value).toBeNull();
expect(g.controls['login'].validator).toBe(syncValidator);
expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
});
it('should create groups with a custom validator', () => {
const g = b.group(
{'login': 'some value'}, {'validator': syncValidator, 'asyncValidator': asyncValidator});
expect(g.validator).toBe(syncValidator);
expect(g.asyncValidator).toBe(asyncValidator);
});
it('should create control arrays', () => {
const c = b.control('three');
const e = b.control(null);
const f = b.control(undefined);
const a = b.array(
['one', ['two', syncValidator], c, b.array(['four']), e, f], syncValidator, asyncValidator);
expect(a.value).toEqual(['one', 'two', 'three', ['four'], null, null]);
expect(a.validator).toBe(syncValidator);
expect(a.asyncValidator).toBe(asyncValidator);
});
it('should create control arrays with multiple async validators', fakeAsync(() => {
function asyncValidator1() {
return of({'async1': true});
}
function asyncValidator2() {
return of({'async2': true});
}
const a = b.array(['one', 'two'], null, [asyncValidator1, asyncValidator2]);
expect(a.value).toEqual(['one', 'two']);
tick();
expect(a.errors).toEqual({'async1': true, 'async2': true});
}));
it('should create control arrays with multiple sync validators', () => {
function syncValidator1() {
return {'sync1': true};
}
function syncValidator2() {
return {'sync2': true};
}
const a = b.array(['one', 'two'], [syncValidator1, syncValidator2]);
expect(a.value).toEqual(['one', 'two']);
expect(a.errors).toEqual({'sync1': true, 'sync2': true});
});
describe('updateOn', () => {
it('should default to on change', () => {
const c = b.control('');
expect(c.updateOn).toEqual('change');
});
it('should create controls from a boxed value', () => {
const g = b.group({'login': {value: 'some value', disabled: true}});
expect(g.controls['login'].value).toEqual('some value');
expect(g.controls['login'].disabled).toEqual(true);
it('should default to on change with an options obj', () => {
const c = b.control('', {validators: Validators.required});
expect(c.updateOn).toEqual('change');
});
it('should create controls from an array', () => {
const g = b.group(
{'login': ['some value'], 'password': ['some value', syncValidator, asyncValidator]});
expect(g.controls['login'].value).toEqual('some value');
expect(g.controls['password'].value).toEqual('some value');
expect(g.controls['password'].validator).toEqual(syncValidator);
expect(g.controls['password'].asyncValidator).toEqual(asyncValidator);
it('should set updateOn when updating on blur', () => {
const c = b.control('', {updateOn: 'blur'});
expect(c.updateOn).toEqual('blur');
});
it('should use controls whose form state is a primitive value', () => {
const g = b.group({'login': b.control('some value', syncValidator, asyncValidator)});
describe('in groups and arrays', () => {
it('should default to group updateOn when not set in control', () => {
const g = b.group({one: b.control(''), two: b.control('')}, {updateOn: 'blur'});
expect(g.controls['login'].value).toEqual('some value');
expect(g.controls['login'].validator).toBe(syncValidator);
expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
});
it('should support controls with no validators and whose form state is null', () => {
const g = b.group({'login': b.control(null)});
expect(g.controls['login'].value).toBeNull();
expect(g.controls['login'].validator).toBeNull();
expect(g.controls['login'].asyncValidator).toBeNull();
});
it('should support controls with validators and whose form state is null', () => {
const g = b.group({'login': b.control(null, syncValidator, asyncValidator)});
expect(g.controls['login'].value).toBeNull();
expect(g.controls['login'].validator).toBe(syncValidator);
expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
});
it('should support controls with no validators and whose form state is undefined', () => {
const g = b.group({'login': b.control(undefined)});
expect(g.controls['login'].value).toBeNull();
expect(g.controls['login'].validator).toBeNull();
expect(g.controls['login'].asyncValidator).toBeNull();
});
it('should support controls with validators and whose form state is undefined', () => {
const g = b.group({'login': b.control(undefined, syncValidator, asyncValidator)});
expect(g.controls['login'].value).toBeNull();
expect(g.controls['login'].validator).toBe(syncValidator);
expect(g.controls['login'].asyncValidator).toBe(asyncValidator);
});
it('should create groups with a custom validator', () => {
const g = b.group(
{'login': 'some value'}, {'validator': syncValidator, 'asyncValidator': asyncValidator});
expect(g.validator).toBe(syncValidator);
expect(g.asyncValidator).toBe(asyncValidator);
});
it('should create control arrays', () => {
const c = b.control('three');
const e = b.control(null);
const f = b.control(undefined);
const a = b.array(
['one', ['two', syncValidator], c, b.array(['four']), e, f], syncValidator,
asyncValidator);
expect(a.value).toEqual(['one', 'two', 'three', ['four'], null, null]);
expect(a.validator).toBe(syncValidator);
expect(a.asyncValidator).toBe(asyncValidator);
});
it('should create control arrays with multiple async validators', fakeAsync(() => {
function asyncValidator1() { return of ({'async1': true}); }
function asyncValidator2() { return of ({'async2': true}); }
const a = b.array(['one', 'two'], null, [asyncValidator1, asyncValidator2]);
expect(a.value).toEqual(['one', 'two']);
tick();
expect(a.errors).toEqual({'async1': true, 'async2': true});
}));
it('should create control arrays with multiple sync validators', () => {
function syncValidator1() { return {'sync1': true}; }
function syncValidator2() { return {'sync2': true}; }
const a = b.array(['one', 'two'], [syncValidator1, syncValidator2]);
expect(a.value).toEqual(['one', 'two']);
expect(a.errors).toEqual({'sync1': true, 'sync2': true});
});
describe('updateOn', () => {
it('should default to on change', () => {
const c = b.control('');
expect(c.updateOn).toEqual('change');
expect(g.get('one')!.updateOn).toEqual('blur');
expect(g.get('two')!.updateOn).toEqual('blur');
});
it('should default to on change with an options obj', () => {
const c = b.control('', {validators: Validators.required});
expect(c.updateOn).toEqual('change');
it('should default to array updateOn when not set in control', () => {
const a = b.array([b.control(''), b.control('')], {updateOn: 'blur'});
expect(a.get([0])!.updateOn).toEqual('blur');
expect(a.get([1])!.updateOn).toEqual('blur');
});
it('should set updateOn when updating on blur', () => {
const c = b.control('', {updateOn: 'blur'});
expect(c.updateOn).toEqual('blur');
it('should set updateOn with nested groups', () => {
const g = b.group(
{
group: b.group({one: b.control(''), two: b.control('')}),
},
{updateOn: 'blur'});
expect(g.get('group.one')!.updateOn).toEqual('blur');
expect(g.get('group.two')!.updateOn).toEqual('blur');
expect(g.get('group')!.updateOn).toEqual('blur');
});
describe('in groups and arrays', () => {
it('should default to group updateOn when not set in control', () => {
const g = b.group({one: b.control(''), two: b.control('')}, {updateOn: 'blur'});
it('should set updateOn with nested arrays', () => {
const g = b.group(
{
arr: b.array([b.control(''), b.control('')]),
},
{updateOn: 'blur'});
expect(g.get('one') !.updateOn).toEqual('blur');
expect(g.get('two') !.updateOn).toEqual('blur');
expect(g.get(['arr', 0])!.updateOn).toEqual('blur');
expect(g.get(['arr', 1])!.updateOn).toEqual('blur');
expect(g.get('arr')!.updateOn).toEqual('blur');
});
it('should allow control updateOn to override group updateOn', () => {
const g = b.group(
{one: b.control('', {updateOn: 'change'}), two: b.control('')}, {updateOn: 'blur'});
expect(g.get('one')!.updateOn).toEqual('change');
expect(g.get('two')!.updateOn).toEqual('blur');
});
it('should set updateOn with complex setup', () => {
const g = b.group({
group: b.group(
{one: b.control('', {updateOn: 'change'}), two: b.control('')}, {updateOn: 'blur'}),
groupTwo: b.group({one: b.control('')}, {updateOn: 'submit'}),
three: b.control('')
});
it('should default to array updateOn when not set in control', () => {
const a = b.array([b.control(''), b.control('')], {updateOn: 'blur'});
expect(a.get([0]) !.updateOn).toEqual('blur');
expect(a.get([1]) !.updateOn).toEqual('blur');
});
it('should set updateOn with nested groups', () => {
const g = b.group(
{
group: b.group({one: b.control(''), two: b.control('')}),
},
{updateOn: 'blur'});
expect(g.get('group.one') !.updateOn).toEqual('blur');
expect(g.get('group.two') !.updateOn).toEqual('blur');
expect(g.get('group') !.updateOn).toEqual('blur');
});
it('should set updateOn with nested arrays', () => {
const g = b.group(
{
arr: b.array([b.control(''), b.control('')]),
},
{updateOn: 'blur'});
expect(g.get(['arr', 0]) !.updateOn).toEqual('blur');
expect(g.get(['arr', 1]) !.updateOn).toEqual('blur');
expect(g.get('arr') !.updateOn).toEqual('blur');
});
it('should allow control updateOn to override group updateOn', () => {
const g = b.group(
{one: b.control('', {updateOn: 'change'}), two: b.control('')}, {updateOn: 'blur'});
expect(g.get('one') !.updateOn).toEqual('change');
expect(g.get('two') !.updateOn).toEqual('blur');
});
it('should set updateOn with complex setup', () => {
const g = b.group({
group: b.group(
{one: b.control('', {updateOn: 'change'}), two: b.control('')}, {updateOn: 'blur'}),
groupTwo: b.group({one: b.control('')}, {updateOn: 'submit'}),
three: b.control('')
});
expect(g.get('group.one') !.updateOn).toEqual('change');
expect(g.get('group.two') !.updateOn).toEqual('blur');
expect(g.get('groupTwo.one') !.updateOn).toEqual('submit');
expect(g.get('three') !.updateOn).toEqual('change');
});
expect(g.get('group.one')!.updateOn).toEqual('change');
expect(g.get('group.two')!.updateOn).toEqual('blur');
expect(g.get('groupTwo.one')!.updateOn).toEqual('submit');
expect(g.get('three')!.updateOn).toEqual('change');
});
});
});
});
})();

2432
packages/forms/test/form_control_spec.ts
View File

File diff suppressed because it is too large Load Diff

2528
packages/forms/test/form_group_spec.ts
View File

File diff suppressed because it is too large Load Diff

168
packages/forms/test/reactive_integration_spec.ts
View File

@ -7,8 +7,8 @@
*/
import {ɵgetDOM as getDOM} from '@angular/common';
import {Component, Directive, Input, Type, forwardRef} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
import {Component, Directive, forwardRef, Input, Type} from '@angular/core';
import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {AbstractControl, AsyncValidator, AsyncValidatorFn, COMPOSITION_BUFFER_MODE, FormArray, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, ReactiveFormsModule, Validators} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {dispatchEvent, sortedClassList} from '@angular/platform-browser/testing/src/browser_util';
@ -19,7 +19,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
{
describe('reactive forms integration tests', () => {
function initTest<T>(component: Type<T>, ...directives: Type<any>[]): ComponentFixture<T> {
TestBed.configureTestingModule(
{declarations: [component, ...directives], imports: [FormsModule, ReactiveFormsModule]});
@ -74,11 +73,9 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(form.value).toEqual({'login': 'updatedValue'});
});
});
describe('re-bound form groups', () => {
it('should update DOM elements initially', () => {
const fixture = initTest(FormGroupComp);
fixture.componentInstance.form = new FormGroup({'login': new FormControl('oldValue')});
@ -150,7 +147,7 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
});
fixture.componentInstance.form = form;
fixture.detectChanges();
expect(form.get('login') !.errors).toEqual({required: true});
expect(form.get('login')!.errors).toEqual({required: true});
const newForm = new FormGroup({
'login': new FormControl(''),
@ -161,34 +158,31 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
fixture.componentInstance.form = newForm;
fixture.detectChanges();
expect(newForm.get('login') !.errors).toEqual({required: true});
expect(newForm.get('login')!.errors).toEqual({required: true});
});
it('should pick up dir validators from nested form groups', () => {
const fixture = initTest(NestedFormGroupComp, LoginIsEmptyValidator);
const form = new FormGroup({
'signin':
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
'signin': new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
});
fixture.componentInstance.form = form;
fixture.detectChanges();
expect(form.get('signin') !.valid).toBe(false);
expect(form.get('signin')!.valid).toBe(false);
const newForm = new FormGroup({
'signin':
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
'signin': new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
});
fixture.componentInstance.form = newForm;
fixture.detectChanges();
expect(form.get('signin') !.valid).toBe(false);
expect(form.get('signin')!.valid).toBe(false);
});
it('should strip named controls that are not found', () => {
const fixture = initTest(NestedFormGroupComp, LoginIsEmptyValidator);
const form = new FormGroup({
'signin':
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
'signin': new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
});
fixture.componentInstance.form = form;
fixture.detectChanges();
@ -200,8 +194,7 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(emailInput.nativeElement.value).toEqual('email');
const newForm = new FormGroup({
'signin':
new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
'signin': new FormGroup({'login': new FormControl(''), 'password': new FormControl('')})
});
fixture.componentInstance.form = newForm;
fixture.detectChanges();
@ -237,7 +230,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
});
describe('nested control rebinding', () => {
it('should attach dir to control when leaf control changes', () => {
const form = new FormGroup({'login': new FormControl('oldValue')});
const fixture = initTest(FormGroupComp);
@ -359,7 +351,7 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(newArr.value).toEqual(['last one']);
newArr.get([0]) !.setValue('set value');
newArr.get([0])!.setValue('set value');
fixture.detectChanges();
firstInput = fixture.debugElement.query(By.css('input')).nativeElement;
@ -416,14 +408,12 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(newArr.value).toEqual(['SF', 'LA', 'Tulsa']);
newArr.get([2]) !.setValue('NY');
newArr.get([2])!.setValue('NY');
fixture.detectChanges();
expect(lastInput.value).toEqual('NY');
});
});
});
describe('form arrays', () => {
@ -494,7 +484,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
cities: [{town: 'LA', state: 'CA'}, {town: 'NY', state: 'NY'}]
});
});
});
describe('programmatic changes', () => {
@ -592,13 +581,10 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
const input = fixture.debugElement.query(By.css('my-input'));
expect(input.nativeElement.getAttribute('disabled')).toBe(null);
});
});
});
describe('user input', () => {
it('should mark controls as touched after interacting with the DOM control', () => {
const fixture = initTest(FormGroupComp);
const login = new FormControl('oldValue');
@ -613,14 +599,13 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(login.touched).toBe(true);
});
});
describe('submit and reset events', () => {
it('should emit ngSubmit event with the original submit event on submit', () => {
const fixture = initTest(FormGroupComp);
fixture.componentInstance.form = new FormGroup({'login': new FormControl('loginValue')});
fixture.componentInstance.event = null !;
fixture.componentInstance.event = null!;
fixture.detectChanges();
const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
@ -672,18 +657,18 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
form.reset();
expect(loginEl.value).toBe('');
});
});
describe('value changes and status changes', () => {
it('should mark controls as dirty before emitting a value change event', () => {
const fixture = initTest(FormGroupComp);
const login = new FormControl('oldValue');
fixture.componentInstance.form = new FormGroup({'login': login});
fixture.detectChanges();
login.valueChanges.subscribe(() => { expect(login.dirty).toBe(true); });
login.valueChanges.subscribe(() => {
expect(login.dirty).toBe(true);
});
const loginEl = fixture.debugElement.query(By.css('input')).nativeElement;
loginEl.value = 'newValue';
@ -705,11 +690,12 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(login.pristine).toBe(false);
login.valueChanges.subscribe(() => { expect(login.pristine).toBe(true); });
login.valueChanges.subscribe(() => {
expect(login.pristine).toBe(true);
});
form.reset();
});
});
describe('setting status classes', () => {
@ -736,7 +722,7 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
it('should work with single fields and async validators', fakeAsync(() => {
const fixture = initTest(FormControlComp);
const control = new FormControl('', null !, uniqLoginAsyncValidator('good'));
const control = new FormControl('', null!, uniqLoginAsyncValidator('good'));
fixture.debugElement.componentInstance.control = control;
fixture.detectChanges();
@ -831,13 +817,10 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(sortedClassList(formEl)).toEqual(['ng-dirty', 'ng-touched', 'ng-valid']);
});
});
describe('updateOn options', () => {
describe('on blur', () => {
it('should not update value or validity based on user input until blur', () => {
const fixture = initTest(FormControlComp);
const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});
@ -1141,7 +1124,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(control.value)
.toEqual('Nancy', 'Expected value to change once control is blurred.');
expect(control.valid).toBe(true, 'Expected validation to run once control is blurred.');
});
it('should update on blur with array updateOn', () => {
@ -1167,7 +1149,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(control.value)
.toEqual('Nancy', 'Expected value to change once control is blurred.');
expect(control.valid).toBe(true, 'Expected validation to run once control is blurred.');
});
@ -1206,17 +1187,13 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(passwordControl.valid)
.toBe(true, 'Expected validation to run once control is blurred.');
});
});
describe('on submit', () => {
it('should set initial value and validity on init', () => {
const fixture = initTest(FormGroupComp);
const form = new FormGroup({
login:
new FormControl('Nancy', {validators: Validators.required, updateOn: 'submit'})
login: new FormControl('Nancy', {validators: Validators.required, updateOn: 'submit'})
});
fixture.componentInstance.form = form;
fixture.detectChanges();
@ -1430,7 +1407,7 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
fixture.componentInstance.form = formGroup;
fixture.detectChanges();
const values: (string | {[key: string]: string})[] = [];
const values: (string|{[key: string]: string})[] = [];
const streams = merge(
control.valueChanges, control.statusChanges, formGroup.valueChanges,
formGroup.statusChanges);
@ -1493,8 +1470,8 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
fixture.componentInstance.form = formGroup;
fixture.detectChanges();
formGroup.get('signin.login') !.setValidators(validatorSpy);
formGroup.get('signin') !.setValidators(groupValidatorSpy);
formGroup.get('signin.login')!.setValidators(validatorSpy);
formGroup.get('signin')!.setValidators(groupValidatorSpy);
const form = fixture.debugElement.query(By.css('form')).nativeElement;
dispatchEvent(form, 'submit');
@ -1502,7 +1479,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(validatorSpy).not.toHaveBeenCalled();
expect(groupValidatorSpy).not.toHaveBeenCalled();
});
it('should mark as untouched properly if pending touched', () => {
@ -1554,7 +1530,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(control.value).toEqual('Nancy', 'Expected value to change on submit.');
expect(control.valid).toBe(true, 'Expected validation to run on submit.');
});
it('should update on submit with array updateOn', () => {
@ -1581,7 +1556,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(control.value).toEqual('Nancy', 'Expected value to change once control on submit');
expect(control.valid).toBe(true, 'Expected validation to run on submit.');
});
it('should allow child control updateOn submit to override group updateOn', () => {
@ -1619,9 +1593,7 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(passwordControl.value).toEqual('Carson', 'Expected value to change on submit.');
expect(passwordControl.valid).toBe(true, 'Expected validation to run on submit.');
});
});
});
describe('ngModel interactions', () => {
@ -1636,7 +1608,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
});
describe('deprecation warnings', () => {
it('should warn once by default when using ngModel with formControlName', fakeAsync(() => {
const fixture = initTest(FormGroupNgModel);
fixture.componentInstance.form =
@ -1679,8 +1650,7 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
fakeAsync(() => {
TestBed.configureTestingModule({
declarations: [FormControlNgModel],
imports:
[ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'always'})]
imports: [ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'always'})]
});
const fixture = TestBed.createComponent(FormControlNgModel);
@ -1710,7 +1680,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(warnSpy).not.toHaveBeenCalled();
}));
});
it('should support ngModel for complex forms', fakeAsync(() => {
@ -1794,9 +1763,7 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(fixture.componentInstance.login)
.toEqual('Nancy', 'Expected ngModel value to update on submit.');
}));
});
describe('validations', () => {
@ -1969,9 +1936,9 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
.toEqual(pattern.nativeElement.getAttribute('pattern'));
fixture.componentInstance.required = false;
fixture.componentInstance.minLen = null !;
fixture.componentInstance.maxLen = null !;
fixture.componentInstance.pattern = null !;
fixture.componentInstance.minLen = null!;
fixture.componentInstance.maxLen = null!;
fixture.componentInstance.pattern = null!;
fixture.detectChanges();
expect(form.hasError('required', ['login'])).toEqual(false);
@ -2011,9 +1978,9 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
fixture.detectChanges();
fixture.componentInstance.required = false;
fixture.componentInstance.minLen = null !;
fixture.componentInstance.maxLen = null !;
fixture.componentInstance.pattern = null !;
fixture.componentInstance.minLen = null!;
fixture.componentInstance.maxLen = null!;
fixture.componentInstance.pattern = null!;
fixture.detectChanges();
expect(newForm.hasError('required', ['login'])).toEqual(false);
@ -2111,7 +2078,7 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
const fixture = initTest(FormControlComp);
const resultArr: number[] = [];
fixture.componentInstance.control =
new FormControl('', null !, observableValidator(resultArr));
new FormControl('', null!, observableValidator(resultArr));
fixture.detectChanges();
tick(100);
@ -2130,12 +2097,9 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(resultArr.length)
.toEqual(2, `Expected original observable to be canceled on the next value change.`);
}));
});
describe('errors', () => {
it('should throw if a form isn\'t passed into formGroup', () => {
const fixture = initTest(FormGroupComp);
@ -2335,11 +2299,9 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(() => fixture.detectChanges())
.toThrowError(new RegExp('If you define both a name and a formControlName'));
});
});
describe('IME events', () => {
it('should determine IME event handling depending on platform by default', () => {
const fixture = initTest(FormControlComp);
fixture.componentInstance.control = new FormControl('oldValue');
@ -2417,16 +2379,16 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
// formControl should update normally
expect(fixture.componentInstance.control.value).toEqual('updatedValue');
});
});
});
}
function uniqLoginAsyncValidator(expectedValue: string, timeout: number = 0) {
return (c: AbstractControl) => {
let resolve: (result: any) => void;
const promise = new Promise<any>(res => { resolve = res; });
const promise = new Promise<any>(res => {
resolve = res;
});
const res = (c.value == expectedValue) ? null : {'uniqLogin': true};
setTimeout(() => resolve(res), timeout);
return promise;
@ -2452,22 +2414,22 @@ class LoginIsEmptyValidator {
@Directive({
selector: '[uniq-login-validator]',
providers: [{
provide: NG_ASYNC_VALIDATORS,
useExisting: forwardRef(() => UniqLoginValidator),
multi: true
}]
providers: [
{provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => UniqLoginValidator), multi: true}
]
})
class UniqLoginValidator implements AsyncValidator {
@Input('uniq-login-validator') expected: any;
validate(c: AbstractControl) { return uniqLoginAsyncValidator(this.expected)(c); }
validate(c: AbstractControl) {
return uniqLoginAsyncValidator(this.expected)(c);
}
}
@Component({selector: 'form-control-comp', template: `<input type="text" [formControl]="control">`})
class FormControlComp {
// TODO(issue/24571): remove '!'.
control !: FormControl;
control!: FormControl;
}
@Component({
@ -2479,11 +2441,11 @@ class FormControlComp {
})
class FormGroupComp {
// TODO(issue/24571): remove '!'.
control !: FormControl;
control!: FormControl;
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
// TODO(issue/24571): remove '!'.
event !: Event;
event!: Event;
}
@Component({
@ -2499,7 +2461,7 @@ class FormGroupComp {
})
class NestedFormGroupComp {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
}
@Component({
@ -2515,9 +2477,9 @@ class NestedFormGroupComp {
})
class FormArrayComp {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
// TODO(issue/24571): remove '!'.
cityArray !: FormArray;
cityArray!: FormArray;
}
@Component({
@ -2534,9 +2496,9 @@ class FormArrayComp {
})
class FormArrayNestedGroup {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
// TODO(issue/24571): remove '!'.
cityArray !: FormArray;
cityArray!: FormArray;
}
@Component({
@ -2549,11 +2511,11 @@ class FormArrayNestedGroup {
})
class FormGroupNgModel {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
// TODO(issue/24571): remove '!'.
login !: string;
login!: string;
// TODO(issue/24571): remove '!'.
password !: string;
password!: string;
}
@Component({
@ -2565,13 +2527,13 @@ class FormGroupNgModel {
})
class FormControlNgModel {
// TODO(issue/24571): remove '!'.
control !: FormControl;
control!: FormControl;
// TODO(issue/24571): remove '!'.
login !: string;
login!: string;
// TODO(issue/24571): remove '!'.
passwordControl !: FormControl;
passwordControl!: FormControl;
// TODO(issue/24571): remove '!'.
password !: string;
password!: string;
}
@Component({
@ -2586,7 +2548,7 @@ class FormControlNgModel {
})
class LoginIsEmptyWrapper {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
}
@Component({
@ -2601,15 +2563,15 @@ class LoginIsEmptyWrapper {
})
class ValidationBindingsForm {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
// TODO(issue/24571): remove '!'.
required !: boolean;
required!: boolean;
// TODO(issue/24571): remove '!'.
minLen !: number;
minLen!: number;
// TODO(issue/24571): remove '!'.
maxLen !: number;
maxLen!: number;
// TODO(issue/24571): remove '!'.
pattern !: string;
pattern!: string;
}
@Component({
@ -2618,7 +2580,7 @@ class ValidationBindingsForm {
})
class FormControlCheckboxRequiredValidator {
// TODO(issue/24571): remove '!'.
control !: FormControl;
control!: FormControl;
}
@Component({
@ -2630,5 +2592,5 @@ class FormControlCheckboxRequiredValidator {
})
class UniqLoginWrapper {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
}

8
packages/forms/test/spies.ts
View File

@ -16,6 +16,10 @@ export class SpyChangeDetectorRef extends SpyObject {
}
}
export class SpyNgControl extends SpyObject { path = []; }
export class SpyNgControl extends SpyObject {
path = [];
}
export class SpyValueAccessor extends SpyObject { writeValue: any; }
export class SpyValueAccessor extends SpyObject {
writeValue: any;
}

151
packages/forms/test/template_integration_spec.ts
View File

@ -7,8 +7,8 @@
*/
import {ɵgetDOM as getDOM} from '@angular/common';
import {Component, Directive, Type, forwardRef} from '@angular/core';
import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
import {Component, Directive, forwardRef, Type} from '@angular/core';
import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormControl, FormsModule, NG_ASYNC_VALIDATORS, NgForm, NgModel} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {dispatchEvent, sortedClassList} from '@angular/platform-browser/testing/src/browser_util';
@ -18,7 +18,6 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
{
describe('template-driven forms integration tests', () => {
function initTest<T>(component: Type<T>, ...directives: Type<any>[]): ComponentFixture<T> {
TestBed.configureTestingModule(
{declarations: [component, ...directives], imports: [FormsModule]});
@ -57,7 +56,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
expect(form.valid).toBe(false);
}));
it('should report properties which are written outside of template bindings', async() => {
it('should report properties which are written outside of template bindings', async () => {
// For example ngModel writes to `checked` property programmatically
// (template does not contain binding to `checked` explicitly)
// https://github.com/angular/angular/issues/33695
@ -131,9 +130,9 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
expect(form.control.get('name') !.value).toEqual({first: 'Nancy', last: 'Drew'});
expect(form.control.get('name.first') !.value).toEqual('Nancy');
expect(form.control.get('email') !.value).toEqual('some email');
expect(form.control.get('name')!.value).toEqual({first: 'Nancy', last: 'Drew'});
expect(form.control.get('name.first')!.value).toEqual('Nancy');
expect(form.control.get('email')!.value).toEqual('some email');
}));
it('should remove controls and control groups from form control model', fakeAsync(() => {
@ -145,7 +144,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
expect(form.control.get('email') !.value).toEqual('some email');
expect(form.control.get('email')!.value).toEqual('some email');
expect(form.value).toEqual({name: {first: 'Nancy'}, email: 'some email'});
// should remove individual control successfully
@ -156,8 +155,8 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
expect(form.control.get('email')).toBe(null);
expect(form.value).toEqual({name: {first: 'Nancy'}});
expect(form.control.get('name') !.value).toEqual({first: 'Nancy'});
expect(form.control.get('name.first') !.value).toEqual('Nancy');
expect(form.control.get('name')!.value).toEqual({first: 'Nancy'});
expect(form.control.get('name.first')!.value).toEqual('Nancy');
// should remove form group successfully
fixture.componentInstance.groupShowing = false;
@ -192,7 +191,6 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
}));
it('should set status classes with ngModel and async validators', fakeAsync(() => {
const fixture = initTest(NgModelAsyncValidation, NgAsyncValidator);
fixture.whenStable().then(() => {
fixture.detectChanges();
@ -252,7 +250,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
it('should not create a template-driven form when ngNoForm is used', () => {
const fixture = initTest(NgNoFormComp);
fixture.detectChanges();
expect(fixture.debugElement.children[0].providerTokens !.length).toEqual(0);
expect(fixture.debugElement.children[0].providerTokens!.length).toEqual(0);
});
it('should not add novalidate when ngNoForm is used', () => {
@ -304,9 +302,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
});
describe('updateOn', () => {
describe('blur', () => {
it('should default updateOn to change', fakeAsync(() => {
const fixture = initTest(NgModelForm);
fixture.componentInstance.name = '';
@ -484,8 +480,8 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
const values: any[] = [];
const form = fixture.debugElement.children[0].injector.get(NgForm);
const sub = merge(form.valueChanges !, form.statusChanges !)
.subscribe(val => values.push(val));
const sub =
merge(form.valueChanges!, form.statusChanges!).subscribe(val => values.push(val));
const input = fixture.debugElement.query(By.css('input')).nativeElement;
input.value = 'Nancy Drew';
@ -560,13 +556,10 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
.toEqual(
['fired', 'fired'],
'Expected ngModelChanges to fire again on blur if value changed.');
}));
});
describe('submit', () => {
it('should set control updateOn to submit properly', fakeAsync(() => {
const fixture = initTest(NgModelForm);
fixture.componentInstance.name = '';
@ -700,8 +693,8 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
form.control.get('name') !.setValidators(groupValidatorSpy);
form.control.get('name.last') !.setValidators(validatorSpy);
form.control.get('name')!.setValidators(groupValidatorSpy);
form.control.get('name.last')!.setValidators(validatorSpy);
const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
dispatchEvent(formEl, 'submit');
@ -816,8 +809,8 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
const values: any[] = [];
const form = fixture.debugElement.children[0].injector.get(NgForm);
const sub = merge(form.valueChanges !, form.statusChanges !)
.subscribe(val => values.push(val));
const sub =
merge(form.valueChanges!, form.statusChanges!).subscribe(val => values.push(val));
const input = fixture.debugElement.query(By.css('input')).nativeElement;
input.value = 'Nancy Drew';
@ -898,11 +891,9 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
['fired', 'fired'],
'Expected ngModelChanges to fire again on submit if value changed.');
}));
});
describe('ngFormOptions', () => {
it('should use ngFormOptions value when ngModelOptions are not set', fakeAsync(() => {
const fixture = initTest(NgModelOptionsStandalone);
fixture.componentInstance.options = {name: 'two'};
@ -911,12 +902,12 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
const controlOne = form.control.get('one') !as FormControl;
const controlOne = form.control.get('one')! as FormControl;
expect((controlOne as any)._updateOn).toBeUndefined();
expect(controlOne.updateOn)
.toEqual('blur', 'Expected first control to inherit updateOn from parent form.');
const controlTwo = form.control.get('two') !as FormControl;
const controlTwo = form.control.get('two')! as FormControl;
expect((controlTwo as any)._updateOn).toBeUndefined();
expect(controlTwo.updateOn)
.toEqual('blur', 'Expected last control to inherit updateOn from parent form.');
@ -952,12 +943,12 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
const controlOne = form.control.get('one') !as FormControl;
const controlOne = form.control.get('one')! as FormControl;
expect((controlOne as any)._updateOn).toBeUndefined();
expect(controlOne.updateOn)
.toEqual('change', 'Expected control updateOn to inherit form updateOn.');
const controlTwo = form.control.get('two') !as FormControl;
const controlTwo = form.control.get('two')! as FormControl;
expect((controlTwo as any)._updateOn)
.toEqual('blur', 'Expected control to set blur override.');
expect(controlTwo.updateOn)
@ -1016,15 +1007,13 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
expect(fixture.componentInstance.two)
.toEqual('Nancy Drew', 'Expected standalone ngModel not to inherit blur update.');
}));
});
});
describe('submit and reset events', () => {
it('should emit ngSubmit event with the original submit event on submit', fakeAsync(() => {
const fixture = initTest(NgModelForm);
fixture.componentInstance.event = null !;
fixture.componentInstance.event = null!;
const form = fixture.debugElement.query(By.css('form'));
dispatchEvent(form.nativeElement, 'submit');
@ -1097,11 +1086,11 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
expect(form.valid).toEqual(true);
expect(form.value).toEqual({});
let formValidity: string = undefined !;
let formValue: Object = undefined !;
let formValidity: string = undefined!;
let formValue: Object = undefined!;
form.statusChanges !.subscribe((status: string) => formValidity = status);
form.valueChanges !.subscribe((value: string) => formValue = value);
form.statusChanges!.subscribe((status: string) => formValidity = status);
form.valueChanges!.subscribe((value: string) => formValue = value);
tick();
@ -1116,8 +1105,9 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
fixture.detectChanges();
tick();
form.get('name') !.valueChanges.subscribe(
() => { expect(form.get('name') !.dirty).toBe(true); });
form.get('name')!.valueChanges.subscribe(() => {
expect(form.get('name')!.dirty).toBe(true);
});
const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
inputEl.value = 'newValue';
@ -1138,10 +1128,11 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
inputEl.value = 'newValue';
dispatchEvent(inputEl, 'input');
expect(form.get('name') !.pristine).toBe(false);
expect(form.get('name')!.pristine).toBe(false);
form.get('name') !.valueChanges.subscribe(
() => { expect(form.get('name') !.pristine).toBe(true); });
form.get('name')!.valueChanges.subscribe(() => {
expect(form.get('name')!.pristine).toBe(true);
});
dispatchEvent(formEl, 'reset');
}));
@ -1160,7 +1151,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
const form = fixture.debugElement.children[0].injector.get(NgForm);
expect(form.value).toEqual({name: {first: '', last: 'Drew'}, email: 'some email'});
expect(form.valid).toBe(false);
expect(form.control.get('name.first') !.disabled).toBe(false);
expect(form.control.get('name.first')!.disabled).toBe(false);
fixture.componentInstance.isDisabled = true;
fixture.detectChanges();
@ -1168,7 +1159,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
expect(form.value).toEqual({name: {last: 'Drew'}, email: 'some email'});
expect(form.valid).toBe(true);
expect(form.control.get('name.first') !.disabled).toBe(true);
expect(form.control.get('name.first')!.disabled).toBe(true);
}));
it('should add disabled attribute in the UI if disable() is called programmatically',
@ -1180,7 +1171,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
form.control.get('name.first') !.disable();
form.control.get('name.first')!.disable();
fixture.detectChanges();
tick();
@ -1197,7 +1188,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
fixture.detectChanges();
fixture.whenStable().then(() => {
const form = fixture.debugElement.children[0].injector.get(NgForm);
expect(form.control.get('name') !.disabled).toBe(true);
expect(form.control.get('name')!.disabled).toBe(true);
const customInput = fixture.debugElement.query(By.css('[name="custom"]'));
expect(customInput.nativeElement.disabled).toEqual(true);
@ -1219,7 +1210,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
fixture.detectChanges();
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
expect(form.control.get('name') !.disabled).toBe(true);
expect(form.control.get('name')!.disabled).toBe(true);
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.disabled).toEqual(true);
@ -1229,18 +1220,16 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
tick();
expect(input.nativeElement.disabled).toEqual(false);
}));
});
describe('validation directives', () => {
it('required validator should validate checkbox', fakeAsync(() => {
const fixture = initTest(NgModelCheckboxRequiredValidator);
fixture.detectChanges();
tick();
const control =
fixture.debugElement.children[0].injector.get(NgForm).control.get('checkbox') !;
fixture.debugElement.children[0].injector.get(NgForm).control.get('checkbox')!;
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.checked).toBe(false);
@ -1276,7 +1265,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
tick();
const control =
fixture.debugElement.children[0].injector.get(NgForm).control.get('email') !;
fixture.debugElement.children[0].injector.get(NgForm).control.get('email')!;
const input = fixture.debugElement.query(By.css('input'));
expect(control.hasError('email')).toBe(false);
@ -1476,9 +1465,9 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
.toEqual(pattern.nativeElement.getAttribute('pattern'));
fixture.componentInstance.required = false;
fixture.componentInstance.minLen = null !;
fixture.componentInstance.maxLen = null !;
fixture.componentInstance.pattern = null !;
fixture.componentInstance.minLen = null!;
fixture.componentInstance.maxLen = null!;
fixture.componentInstance.pattern = null!;
fixture.detectChanges();
expect(form.control.hasError('required', ['required'])).toEqual(false);
@ -1522,7 +1511,6 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
expect(onNgModelChange).toHaveBeenCalledTimes(2);
tick();
}));
});
describe('IME events', () => {
@ -1611,7 +1599,6 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
// ngModel should update normally
expect(fixture.componentInstance.name).toEqual('updatedValue');
}));
});
describe('ngModel corner cases', () => {
@ -1650,7 +1637,6 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
expect(() => fixture.detectChanges()).not.toThrowError();
}));
});
});
}
@ -1662,7 +1648,7 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
})
class StandaloneNgModel {
// TODO(issue/24571): remove '!'.
name !: string;
name!: string;
}
@Component({
@ -1675,9 +1661,9 @@ class StandaloneNgModel {
})
class NgModelForm {
// TODO(issue/24571): remove '!'.
name !: string | null;
name!: string|null;
// TODO(issue/24571): remove '!'.
event !: Event;
event!: Event;
options = {};
onReset() {}
@ -1701,13 +1687,13 @@ class NgModelNativeValidateForm {
})
class NgModelGroupForm {
// TODO(issue/24571): remove '!'.
first !: string;
first!: string;
// TODO(issue/24571): remove '!'.
last !: string;
last!: string;
// TODO(issue/24571): remove '!'.
email !: string;
email!: string;
// TODO(issue/24571): remove '!'.
isDisabled !: boolean;
isDisabled!: boolean;
options = {updateOn: 'change'};
}
@ -1724,7 +1710,7 @@ class NgModelGroupForm {
})
class NgModelValidBinding {
// TODO(issue/24571): remove '!'.
first !: string;
first!: string;
}
@ -1741,11 +1727,11 @@ class NgModelValidBinding {
})
class NgModelNgIfForm {
// TODO(issue/24571): remove '!'.
first !: string;
first!: string;
groupShowing = true;
emailShowing = true;
// TODO(issue/24571): remove '!'.
email !: string;
email!: string;
}
@Component({
@ -1781,9 +1767,9 @@ class InvalidNgModelNoName {
})
class NgModelOptionsStandalone {
// TODO(issue/24571): remove '!'.
one !: string;
one!: string;
// TODO(issue/24571): remove '!'.
two !: string;
two!: string;
options: {name?: string, standalone?: boolean, updateOn?: string} = {standalone: true};
formOptions = {};
}
@ -1801,13 +1787,13 @@ class NgModelOptionsStandalone {
})
class NgModelValidationBindings {
// TODO(issue/24571): remove '!'.
required !: boolean;
required!: boolean;
// TODO(issue/24571): remove '!'.
minLen !: number;
minLen!: number;
// TODO(issue/24571): remove '!'.
maxLen !: number;
maxLen!: number;
// TODO(issue/24571): remove '!'.
pattern !: string;
pattern!: string;
}
@Component({
@ -1820,11 +1806,11 @@ class NgModelValidationBindings {
})
class NgModelMultipleValidators {
// TODO(issue/24571): remove '!'.
required !: boolean;
required!: boolean;
// TODO(issue/24571): remove '!'.
minLen !: number;
minLen!: number;
// TODO(issue/24571): remove '!'.
pattern !: string | RegExp;
pattern!: string|RegExp;
}
@Component({
@ -1847,12 +1833,13 @@ class NgModelEmailValidator {
@Directive({
selector: '[ng-async-validator]',
providers: [
{provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => NgAsyncValidator), multi: true}
]
providers:
[{provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => NgAsyncValidator), multi: true}]
})
class NgAsyncValidator implements AsyncValidator {
validate(c: AbstractControl) { return Promise.resolve(null); }
validate(c: AbstractControl) {
return Promise.resolve(null);
}
}
@Component({
@ -1873,11 +1860,13 @@ class NgModelAsyncValidation {
})
class NgModelChangesForm {
// TODO(issue/24571): remove '!'.
name !: string;
name!: string;
events: string[] = [];
options: any;
log() { this.events.push('fired'); }
log() {
this.events.push('fired');
}
}
@Component({

826
packages/forms/test/validators_spec.ts
View File

@ -11,453 +11,487 @@ import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
import {AbstractControl, AsyncValidatorFn, FormArray, FormControl, Validators} from '@angular/forms';
import {normalizeAsyncValidator} from '@angular/forms/src/directives/normalize_validator';
import {AsyncValidator, ValidationErrors, ValidatorFn} from '@angular/forms/src/directives/validators';
import {Observable, of , timer} from 'rxjs';
import {Observable, of, timer} from 'rxjs';
import {first, map} from 'rxjs/operators';
(function() {
function validator(key: string, error: any): ValidatorFn {
return (c: AbstractControl) => {
const r: ValidationErrors = {};
r[key] = error;
return r;
};
function validator(key: string, error: any): ValidatorFn {
return (c: AbstractControl) => {
const r: ValidationErrors = {};
r[key] = error;
return r;
};
}
class AsyncValidatorDirective implements AsyncValidator {
constructor(private expected: string, private error: any) {}
validate(c: any): Observable<ValidationErrors> {
return Observable.create((obs: any) => {
const error = this.expected !== c.value ? this.error : null;
obs.next(error);
obs.complete();
});
}
}
class AsyncValidatorDirective implements AsyncValidator {
constructor(private expected: string, private error: any) {}
validate(c: any): Observable<ValidationErrors> {
return Observable.create((obs: any) => {
const error = this.expected !== c.value ? this.error : null;
obs.next(error);
obs.complete();
});
}
}
describe('Validators', () => {
describe('min', () => {
it('should not error on an empty string',
() => { expect(Validators.min(2)(new FormControl(''))).toBeNull(); });
it('should not error on null',
() => { expect(Validators.min(2)(new FormControl(null))).toBeNull(); });
it('should not error on undefined',
() => { expect(Validators.min(2)(new FormControl(undefined))).toBeNull(); });
it('should return null if NaN after parsing',
() => { expect(Validators.min(2)(new FormControl('a'))).toBeNull(); });
it('should return a validation error on small values', () => {
expect(Validators.min(2)(new FormControl(1))).toEqual({'min': {'min': 2, 'actual': 1}});
});
it('should return a validation error on small values converted from strings', () => {
expect(Validators.min(2)(new FormControl('1'))).toEqual({'min': {'min': 2, 'actual': '1'}});
});
it('should not error on big values',
() => { expect(Validators.min(2)(new FormControl(3))).toBeNull(); });
it('should not error on equal values',
() => { expect(Validators.min(2)(new FormControl(2))).toBeNull(); });
it('should not error on equal values when value is string',
() => { expect(Validators.min(2)(new FormControl('2'))).toBeNull(); });
it('should validate as expected when min value is a string', () => {
expect(Validators.min('2' as any)(new FormControl(1))).toEqual({
'min': {'min': '2', 'actual': 1}
});
});
it('should return null if min value is undefined',
() => { expect(Validators.min(undefined as any)(new FormControl(3))).toBeNull(); });
it('should return null if min value is null',
() => { expect(Validators.min(null as any)(new FormControl(3))).toBeNull(); });
describe('Validators', () => {
describe('min', () => {
it('should not error on an empty string', () => {
expect(Validators.min(2)(new FormControl(''))).toBeNull();
});
describe('max', () => {
it('should not error on an empty string',
() => { expect(Validators.max(2)(new FormControl(''))).toBeNull(); });
it('should not error on null',
() => { expect(Validators.max(2)(new FormControl(null))).toBeNull(); });
it('should not error on undefined',
() => { expect(Validators.max(2)(new FormControl(undefined))).toBeNull(); });
it('should return null if NaN after parsing',
() => { expect(Validators.max(2)(new FormControl('aaa'))).toBeNull(); });
it('should return a validation error on big values', () => {
expect(Validators.max(2)(new FormControl(3))).toEqual({'max': {'max': 2, 'actual': 3}});
});
it('should return a validation error on big values converted from strings', () => {
expect(Validators.max(2)(new FormControl('3'))).toEqual({'max': {'max': 2, 'actual': '3'}});
});
it('should not error on small values',
() => { expect(Validators.max(2)(new FormControl(1))).toBeNull(); });
it('should not error on equal values',
() => { expect(Validators.max(2)(new FormControl(2))).toBeNull(); });
it('should not error on equal values when value is string',
() => { expect(Validators.max(2)(new FormControl('2'))).toBeNull(); });
it('should validate as expected when max value is a string', () => {
expect(Validators.max('2' as any)(new FormControl(3))).toEqual({
'max': {'max': '2', 'actual': 3}
});
});
it('should return null if max value is undefined',
() => { expect(Validators.max(undefined as any)(new FormControl(3))).toBeNull(); });
it('should return null if max value is null',
() => { expect(Validators.max(null as any)(new FormControl(3))).toBeNull(); });
it('should not error on null', () => {
expect(Validators.min(2)(new FormControl(null))).toBeNull();
});
describe('required', () => {
it('should error on an empty string',
() => { expect(Validators.required(new FormControl(''))).toEqual({'required': true}); });
it('should error on null',
() => { expect(Validators.required(new FormControl(null))).toEqual({'required': true}); });
it('should not error on undefined', () => {
expect(Validators.required(new FormControl(undefined))).toEqual({'required': true});
});
it('should not error on a non-empty string',
() => { expect(Validators.required(new FormControl('not empty'))).toBeNull(); });
it('should accept zero as valid',
() => { expect(Validators.required(new FormControl(0))).toBeNull(); });
it('should error on an empty array',
() => expect(Validators.required(new FormControl([]))).toEqual({'required': true}));
it('should not error on a non-empty array',
() => expect(Validators.required(new FormControl([1, 2]))).toBeNull());
it('should not error on undefined', () => {
expect(Validators.min(2)(new FormControl(undefined))).toBeNull();
});
describe('requiredTrue', () => {
it('should error on false',
() => expect(Validators.requiredTrue(new FormControl(false))).toEqual({'required': true}));
it('should not error on true',
() => expect(Validators.requiredTrue(new FormControl(true))).toBeNull());
it('should return null if NaN after parsing', () => {
expect(Validators.min(2)(new FormControl('a'))).toBeNull();
});
describe('email', () => {
it('should not error on an empty string',
() => expect(Validators.email(new FormControl(''))).toBeNull());
it('should not error on null',
() => expect(Validators.email(new FormControl(null))).toBeNull());
it('should error on invalid email',
() => expect(Validators.email(new FormControl('some text'))).toEqual({'email': true}));
it('should not error on valid email',
() => expect(Validators.email(new FormControl('test@gmail.com'))).toBeNull());
it('should return a validation error on small values', () => {
expect(Validators.min(2)(new FormControl(1))).toEqual({'min': {'min': 2, 'actual': 1}});
});
describe('minLength', () => {
it('should not error on an empty string',
() => { expect(Validators.minLength(2)(new FormControl(''))).toBeNull(); });
it('should return a validation error on small values converted from strings', () => {
expect(Validators.min(2)(new FormControl('1'))).toEqual({'min': {'min': 2, 'actual': '1'}});
});
it('should not error on null',
() => { expect(Validators.minLength(2)(new FormControl(null))).toBeNull(); });
it('should not error on big values', () => {
expect(Validators.min(2)(new FormControl(3))).toBeNull();
});
it('should not error on undefined',
() => { expect(Validators.minLength(2)(new FormControl(undefined))).toBeNull(); });
it('should not error on equal values', () => {
expect(Validators.min(2)(new FormControl(2))).toBeNull();
});
it('should not error on valid strings',
() => { expect(Validators.minLength(2)(new FormControl('aa'))).toBeNull(); });
it('should not error on equal values when value is string', () => {
expect(Validators.min(2)(new FormControl('2'))).toBeNull();
});
it('should error on short strings', () => {
expect(Validators.minLength(2)(new FormControl('a'))).toEqual({
'minlength': {'requiredLength': 2, 'actualLength': 1}
});
});
it('should not error when FormArray has valid length', () => {
const fa = new FormArray([new FormControl(''), new FormControl('')]);
expect(Validators.minLength(2)(fa)).toBeNull();
});
it('should error when FormArray has invalid length', () => {
const fa = new FormArray([new FormControl('')]);
expect(Validators.minLength(2)(fa)).toEqual({
'minlength': {'requiredLength': 2, 'actualLength': 1}
});
it('should validate as expected when min value is a string', () => {
expect(Validators.min('2' as any)(new FormControl(1))).toEqual({
'min': {'min': '2', 'actual': 1}
});
});
describe('maxLength', () => {
it('should not error on an empty string',
() => { expect(Validators.maxLength(2)(new FormControl(''))).toBeNull(); });
it('should return null if min value is undefined', () => {
expect(Validators.min(undefined as any)(new FormControl(3))).toBeNull();
});
it('should not error on null',
() => { expect(Validators.maxLength(2)(new FormControl(null))).toBeNull(); });
it('should return null if min value is null', () => {
expect(Validators.min(null as any)(new FormControl(3))).toBeNull();
});
});
it('should not error on undefined',
() => { expect(Validators.maxLength(2)(new FormControl(undefined))).toBeNull(); });
describe('max', () => {
it('should not error on an empty string', () => {
expect(Validators.max(2)(new FormControl(''))).toBeNull();
});
it('should not error on valid strings',
() => { expect(Validators.maxLength(2)(new FormControl('aa'))).toBeNull(); });
it('should not error on null', () => {
expect(Validators.max(2)(new FormControl(null))).toBeNull();
});
it('should error on long strings', () => {
expect(Validators.maxLength(2)(new FormControl('aaa'))).toEqual({
'maxlength': {'requiredLength': 2, 'actualLength': 3}
});
});
it('should not error on undefined', () => {
expect(Validators.max(2)(new FormControl(undefined))).toBeNull();
});
it('should not error when FormArray has valid length', () => {
const fa = new FormArray([new FormControl(''), new FormControl('')]);
expect(Validators.maxLength(2)(fa)).toBeNull();
});
it('should return null if NaN after parsing', () => {
expect(Validators.max(2)(new FormControl('aaa'))).toBeNull();
});
it('should error when FormArray has invalid length', () => {
const fa = new FormArray([new FormControl(''), new FormControl('')]);
expect(Validators.maxLength(1)(fa)).toEqual({
'maxlength': {'requiredLength': 1, 'actualLength': 2}
});
it('should return a validation error on big values', () => {
expect(Validators.max(2)(new FormControl(3))).toEqual({'max': {'max': 2, 'actual': 3}});
});
it('should return a validation error on big values converted from strings', () => {
expect(Validators.max(2)(new FormControl('3'))).toEqual({'max': {'max': 2, 'actual': '3'}});
});
it('should not error on small values', () => {
expect(Validators.max(2)(new FormControl(1))).toBeNull();
});
it('should not error on equal values', () => {
expect(Validators.max(2)(new FormControl(2))).toBeNull();
});
it('should not error on equal values when value is string', () => {
expect(Validators.max(2)(new FormControl('2'))).toBeNull();
});
it('should validate as expected when max value is a string', () => {
expect(Validators.max('2' as any)(new FormControl(3))).toEqual({
'max': {'max': '2', 'actual': 3}
});
});
describe('pattern', () => {
it('should not error on an empty string',
() => { expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(''))).toBeNull(); });
it('should not error on null',
() => { expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(null))).toBeNull(); });
it('should not error on undefined', () => {
expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(undefined))).toBeNull();
});
it('should not error on null value and "null" pattern',
() => { expect(Validators.pattern('null')(new FormControl(null))).toBeNull(); });
it('should not error on valid strings',
() => expect(Validators.pattern('[a-zA-Z ]*')(new FormControl('aaAA'))).toBeNull());
it('should error on failure to match string', () => {
expect(Validators.pattern('[a-zA-Z ]*')(new FormControl('aaa0'))).toEqual({
'pattern': {'requiredPattern': '^[a-zA-Z ]*$', 'actualValue': 'aaa0'}
});
});
it('should accept RegExp object', () => {
const pattern: RegExp = new RegExp('[a-zA-Z ]+');
expect(Validators.pattern(pattern)(new FormControl('aaAA'))).toBeNull();
});
it('should error on failure to match RegExp object', () => {
const pattern: RegExp = new RegExp('^[a-zA-Z ]*$');
expect(Validators.pattern(pattern)(new FormControl('aaa0'))).toEqual({
'pattern': {'requiredPattern': '/^[a-zA-Z ]*$/', 'actualValue': 'aaa0'}
});
});
it('should not error on "null" pattern',
() => expect(Validators.pattern(null !)(new FormControl('aaAA'))).toBeNull());
it('should not error on "undefined" pattern',
() => expect(Validators.pattern(undefined !)(new FormControl('aaAA'))).toBeNull());
it('should work with pattern string containing both boundary symbols',
() => expect(Validators.pattern('^[aA]*$')(new FormControl('aaAA'))).toBeNull());
it('should work with pattern string containing only start boundary symbols',
() => expect(Validators.pattern('^[aA]*')(new FormControl('aaAA'))).toBeNull());
it('should work with pattern string containing only end boundary symbols',
() => expect(Validators.pattern('[aA]*$')(new FormControl('aaAA'))).toBeNull());
it('should work with pattern string not containing any boundary symbols',
() => expect(Validators.pattern('[aA]*')(new FormControl('aaAA'))).toBeNull());
it('should return null if max value is undefined', () => {
expect(Validators.max(undefined as any)(new FormControl(3))).toBeNull();
});
describe('compose', () => {
it('should return null when given null',
() => { expect(Validators.compose(null !)).toBe(null); });
it('should return null if max value is null', () => {
expect(Validators.max(null as any)(new FormControl(3))).toBeNull();
});
});
describe('required', () => {
it('should error on an empty string', () => {
expect(Validators.required(new FormControl(''))).toEqual({'required': true});
});
it('should error on null', () => {
expect(Validators.required(new FormControl(null))).toEqual({'required': true});
});
it('should not error on undefined', () => {
expect(Validators.required(new FormControl(undefined))).toEqual({'required': true});
});
it('should not error on a non-empty string', () => {
expect(Validators.required(new FormControl('not empty'))).toBeNull();
});
it('should accept zero as valid', () => {
expect(Validators.required(new FormControl(0))).toBeNull();
});
it('should error on an empty array',
() => expect(Validators.required(new FormControl([]))).toEqual({'required': true}));
it('should not error on a non-empty array',
() => expect(Validators.required(new FormControl([1, 2]))).toBeNull());
});
describe('requiredTrue', () => {
it('should error on false',
() => expect(Validators.requiredTrue(new FormControl(false))).toEqual({'required': true}));
it('should not error on true',
() => expect(Validators.requiredTrue(new FormControl(true))).toBeNull());
});
describe('email', () => {
it('should not error on an empty string',
() => expect(Validators.email(new FormControl(''))).toBeNull());
it('should not error on null',
() => expect(Validators.email(new FormControl(null))).toBeNull());
it('should error on invalid email',
() => expect(Validators.email(new FormControl('some text'))).toEqual({'email': true}));
it('should not error on valid email',
() => expect(Validators.email(new FormControl('test@gmail.com'))).toBeNull());
});
describe('minLength', () => {
it('should not error on an empty string', () => {
expect(Validators.minLength(2)(new FormControl(''))).toBeNull();
});
it('should not error on null', () => {
expect(Validators.minLength(2)(new FormControl(null))).toBeNull();
});
it('should not error on undefined', () => {
expect(Validators.minLength(2)(new FormControl(undefined))).toBeNull();
});
it('should not error on valid strings', () => {
expect(Validators.minLength(2)(new FormControl('aa'))).toBeNull();
});
it('should error on short strings', () => {
expect(Validators.minLength(2)(new FormControl('a'))).toEqual({
'minlength': {'requiredLength': 2, 'actualLength': 1}
});
});
it('should not error when FormArray has valid length', () => {
const fa = new FormArray([new FormControl(''), new FormControl('')]);
expect(Validators.minLength(2)(fa)).toBeNull();
});
it('should error when FormArray has invalid length', () => {
const fa = new FormArray([new FormControl('')]);
expect(Validators.minLength(2)(fa)).toEqual({
'minlength': {'requiredLength': 2, 'actualLength': 1}
});
});
});
describe('maxLength', () => {
it('should not error on an empty string', () => {
expect(Validators.maxLength(2)(new FormControl(''))).toBeNull();
});
it('should not error on null', () => {
expect(Validators.maxLength(2)(new FormControl(null))).toBeNull();
});
it('should not error on undefined', () => {
expect(Validators.maxLength(2)(new FormControl(undefined))).toBeNull();
});
it('should not error on valid strings', () => {
expect(Validators.maxLength(2)(new FormControl('aa'))).toBeNull();
});
it('should error on long strings', () => {
expect(Validators.maxLength(2)(new FormControl('aaa'))).toEqual({
'maxlength': {'requiredLength': 2, 'actualLength': 3}
});
});
it('should not error when FormArray has valid length', () => {
const fa = new FormArray([new FormControl(''), new FormControl('')]);
expect(Validators.maxLength(2)(fa)).toBeNull();
});
it('should error when FormArray has invalid length', () => {
const fa = new FormArray([new FormControl(''), new FormControl('')]);
expect(Validators.maxLength(1)(fa)).toEqual({
'maxlength': {'requiredLength': 1, 'actualLength': 2}
});
});
});
describe('pattern', () => {
it('should not error on an empty string', () => {
expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(''))).toBeNull();
});
it('should not error on null', () => {
expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(null))).toBeNull();
});
it('should not error on undefined', () => {
expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(undefined))).toBeNull();
});
it('should not error on null value and "null" pattern', () => {
expect(Validators.pattern('null')(new FormControl(null))).toBeNull();
});
it('should not error on valid strings',
() => expect(Validators.pattern('[a-zA-Z ]*')(new FormControl('aaAA'))).toBeNull());
it('should error on failure to match string', () => {
expect(Validators.pattern('[a-zA-Z ]*')(new FormControl('aaa0'))).toEqual({
'pattern': {'requiredPattern': '^[a-zA-Z ]*$', 'actualValue': 'aaa0'}
});
});
it('should accept RegExp object', () => {
const pattern: RegExp = new RegExp('[a-zA-Z ]+');
expect(Validators.pattern(pattern)(new FormControl('aaAA'))).toBeNull();
});
it('should error on failure to match RegExp object', () => {
const pattern: RegExp = new RegExp('^[a-zA-Z ]*$');
expect(Validators.pattern(pattern)(new FormControl('aaa0'))).toEqual({
'pattern': {'requiredPattern': '/^[a-zA-Z ]*$/', 'actualValue': 'aaa0'}
});
});
it('should not error on "null" pattern',
() => expect(Validators.pattern(null!)(new FormControl('aaAA'))).toBeNull());
it('should not error on "undefined" pattern',
() => expect(Validators.pattern(undefined!)(new FormControl('aaAA'))).toBeNull());
it('should work with pattern string containing both boundary symbols',
() => expect(Validators.pattern('^[aA]*$')(new FormControl('aaAA'))).toBeNull());
it('should work with pattern string containing only start boundary symbols',
() => expect(Validators.pattern('^[aA]*')(new FormControl('aaAA'))).toBeNull());
it('should work with pattern string containing only end boundary symbols',
() => expect(Validators.pattern('[aA]*$')(new FormControl('aaAA'))).toBeNull());
it('should work with pattern string not containing any boundary symbols',
() => expect(Validators.pattern('[aA]*')(new FormControl('aaAA'))).toBeNull());
});
describe('compose', () => {
it('should return null when given null', () => {
expect(Validators.compose(null!)).toBe(null);
});
it('should collect errors from all the validators', () => {
const c = Validators.compose([validator('a', true), validator('b', true)])!;
expect(c(new FormControl(''))).toEqual({'a': true, 'b': true});
});
it('should run validators left to right', () => {
const c = Validators.compose([validator('a', 1), validator('a', 2)])!;
expect(c(new FormControl(''))).toEqual({'a': 2});
});
it('should return null when no errors', () => {
const c = Validators.compose([Validators.nullValidator, Validators.nullValidator])!;
expect(c(new FormControl(''))).toBeNull();
});
it('should ignore nulls', () => {
const c = Validators.compose([null!, Validators.required])!;
expect(c(new FormControl(''))).toEqual({'required': true});
});
});
describe('composeAsync', () => {
describe('promises', () => {
function promiseValidator(response: {[key: string]: any}): AsyncValidatorFn {
return (c: AbstractControl) => {
const res = c.value != 'expected' ? response : null;
return Promise.resolve(res);
};
}
it('should return null when given null', () => {
expect(Validators.composeAsync(null!)).toBeNull();
});
it('should collect errors from all the validators', fakeAsync(() => {
const v = Validators.composeAsync(
[promiseValidator({'one': true}), promiseValidator({'two': true})])!;
let errorMap: {[key: string]: any}|null = undefined!;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
tick();
expect(errorMap!).toEqual({'one': true, 'two': true});
}));
it('should normalize and evaluate async validator-directives correctly', fakeAsync(() => {
const v = Validators.composeAsync(
[normalizeAsyncValidator(new AsyncValidatorDirective('expected', {'one': true}))])!;
let errorMap: {[key: string]: any}|null = undefined!;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
tick();
expect(errorMap!).toEqual({'one': true});
}));
it('should return null when no errors', fakeAsync(() => {
const v = Validators.composeAsync([promiseValidator({'one': true})])!;
let errorMap: {[key: string]: any}|null = undefined!;
(v(new FormControl('expected')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
tick();
expect(errorMap).toBeNull();
}));
it('should ignore nulls', fakeAsync(() => {
const v = Validators.composeAsync([promiseValidator({'one': true}), null!])!;
let errorMap: {[key: string]: any}|null = undefined!;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
tick();
expect(errorMap!).toEqual({'one': true});
}));
});
describe('observables', () => {
function observableValidator(response: {[key: string]: any}): AsyncValidatorFn {
return (c: AbstractControl) => {
const res = c.value != 'expected' ? response : null;
return of(res);
};
}
it('should return null when given null', () => {
expect(Validators.composeAsync(null!)).toBeNull();
});
it('should collect errors from all the validators', () => {
const c = Validators.compose([validator('a', true), validator('b', true)]) !;
expect(c(new FormControl(''))).toEqual({'a': true, 'b': true});
const v = Validators.composeAsync(
[observableValidator({'one': true}), observableValidator({'two': true})])!;
let errorMap: {[key: string]: any}|null = undefined!;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
expect(errorMap!).toEqual({'one': true, 'two': true});
});
it('should run validators left to right', () => {
const c = Validators.compose([validator('a', 1), validator('a', 2)]) !;
expect(c(new FormControl(''))).toEqual({'a': 2});
it('should normalize and evaluate async validator-directives correctly', () => {
const v = Validators.composeAsync(
[normalizeAsyncValidator(new AsyncValidatorDirective('expected', {'one': true}))])!;
let errorMap: {[key: string]: any}|null = undefined!;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors)!;
expect(errorMap!).toEqual({'one': true});
});
it('should return null when no errors', () => {
const c = Validators.compose([Validators.nullValidator, Validators.nullValidator]) !;
expect(c(new FormControl(''))).toBeNull();
const v = Validators.composeAsync([observableValidator({'one': true})])!;
let errorMap: {[key: string]: any}|null = undefined!;
(v(new FormControl('expected')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
expect(errorMap).toBeNull();
});
it('should ignore nulls', () => {
const c = Validators.compose([null !, Validators.required]) !;
expect(c(new FormControl(''))).toEqual({'required': true});
});
});
const v = Validators.composeAsync([observableValidator({'one': true}), null!])!;
describe('composeAsync', () => {
let errorMap: {[key: string]: any}|null = undefined!;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
describe('promises', () => {
function promiseValidator(response: {[key: string]: any}): AsyncValidatorFn {
return (c: AbstractControl) => {
const res = c.value != 'expected' ? response : null;
return Promise.resolve(res);
};
}
it('should return null when given null',
() => { expect(Validators.composeAsync(null !)).toBeNull(); });
it('should collect errors from all the validators', fakeAsync(() => {
const v = Validators.composeAsync(
[promiseValidator({'one': true}), promiseValidator({'two': true})]) !;
let errorMap: {[key: string]: any}|null = undefined !;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any} | null) => errorMap = errors);
tick();
expect(errorMap !).toEqual({'one': true, 'two': true});
}));
it('should normalize and evaluate async validator-directives correctly', fakeAsync(() => {
const v = Validators.composeAsync([normalizeAsyncValidator(
new AsyncValidatorDirective('expected', {'one': true}))]) !;
let errorMap: {[key: string]: any}|null = undefined !;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any} | null) => errorMap = errors);
tick();
expect(errorMap !).toEqual({'one': true});
}));
it('should return null when no errors', fakeAsync(() => {
const v = Validators.composeAsync([promiseValidator({'one': true})]) !;
let errorMap: {[key: string]: any}|null = undefined !;
(v(new FormControl('expected')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any} | null) => errorMap = errors);
tick();
expect(errorMap).toBeNull();
}));
it('should ignore nulls', fakeAsync(() => {
const v = Validators.composeAsync([promiseValidator({'one': true}), null !]) !;
let errorMap: {[key: string]: any}|null = undefined !;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any} | null) => errorMap = errors);
tick();
expect(errorMap !).toEqual({'one': true});
}));
expect(errorMap!).toEqual({'one': true});
});
describe('observables', () => {
function observableValidator(response: {[key: string]: any}): AsyncValidatorFn {
return (c: AbstractControl) => {
const res = c.value != 'expected' ? response : null;
return of (res);
};
}
it('should wait for all validators before setting errors', fakeAsync(() => {
function getTimerObs(time: number, errorMap: {[key: string]: any}): AsyncValidatorFn {
return (c: AbstractControl) => {
return timer(time).pipe(map(() => errorMap));
};
}
it('should return null when given null',
() => { expect(Validators.composeAsync(null !)).toBeNull(); });
const v = Validators.composeAsync(
[getTimerObs(100, {one: true}), getTimerObs(200, {two: true})])!;
it('should collect errors from all the validators', () => {
const v = Validators.composeAsync(
[observableValidator({'one': true}), observableValidator({'two': true})]) !;
let errorMap: {[key: string]: any}|null = undefined!;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
let errorMap: {[key: string]: any}|null = undefined !;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any} | null) => errorMap = errors);
expect(errorMap !).toEqual({'one': true, 'two': true});
});
it('should normalize and evaluate async validator-directives correctly', () => {
const v = Validators.composeAsync(
[normalizeAsyncValidator(new AsyncValidatorDirective('expected', {'one': true}))]) !;
let errorMap: {[key: string]: any}|null = undefined !;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any} | null) => errorMap = errors) !;
expect(errorMap !).toEqual({'one': true});
});
it('should return null when no errors', () => {
const v = Validators.composeAsync([observableValidator({'one': true})]) !;
let errorMap: {[key: string]: any}|null = undefined !;
(v(new FormControl('expected')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any} | null) => errorMap = errors);
expect(errorMap).toBeNull();
});
it('should ignore nulls', () => {
const v = Validators.composeAsync([observableValidator({'one': true}), null !]) !;
let errorMap: {[key: string]: any}|null = undefined !;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any} | null) => errorMap = errors);
expect(errorMap !).toEqual({'one': true});
});
it('should wait for all validators before setting errors', fakeAsync(() => {
function getTimerObs(time: number, errorMap: {[key: string]: any}): AsyncValidatorFn {
return (c: AbstractControl) => { return timer(time).pipe(map(() => errorMap)); };
}
const v = Validators.composeAsync(
[getTimerObs(100, {one: true}), getTimerObs(200, {two: true})]) !;
let errorMap: {[key: string]: any}|null = undefined !;
(v(new FormControl('invalid')) as Observable<ValidationErrors|null>)
.pipe(first())
.subscribe((errors: {[key: string]: any} | null) => errorMap = errors);
tick(100);
expect(errorMap).not.toBeDefined(
`Expected errors not to be set until all validators came back.`);
tick(100);
expect(errorMap !)
.toEqual(
{one: true, two: true},
`Expected errors to merge once all validators resolved.`);
}));
});
tick(100);
expect(errorMap).not.toBeDefined(
`Expected errors not to be set until all validators came back.`);
tick(100);
expect(errorMap!).toEqual(
{one: true, two: true}, `Expected errors to merge once all validators resolved.`);
}));
});
});
});
})();

171
packages/forms/test/value_accessor_integration_spec.ts
View File

@ -7,14 +7,13 @@
*/
import {Component, Directive, EventEmitter, Input, Output, Type, ViewChild} from '@angular/core';
import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {AbstractControl, ControlValueAccessor, FormControl, FormGroup, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, NgForm, NgModel, ReactiveFormsModule, Validators} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
{
describe('value accessors', () => {
function initTest<T>(component: Type<T>, ...directives: Type<any>[]): ComponentFixture<T> {
TestBed.configureTestingModule(
{declarations: [component, ...directives], imports: [FormsModule, ReactiveFormsModule]});
@ -64,7 +63,11 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input'));
form.valueChanges.subscribe({next: (value) => { throw 'Should not happen'; }});
form.valueChanges.subscribe({
next: (value) => {
throw 'Should not happen';
}
});
input.nativeElement.value = 'updatedValue';
dispatchEvent(input.nativeElement, 'change');
@ -160,9 +163,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
});
describe('select controls', () => {
describe('in reactive forms', () => {
it(`should support primitive values`, () => {
if (isNode) return;
const fixture = initTest(FormControlNameSelect);
@ -197,7 +198,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
it('should throw an error if compareWith is not a function', () => {
const fixture = initTest(FormControlSelectWithCompareFn);
fixture.componentInstance.compareFn = null !;
fixture.componentInstance.compareFn = null!;
expect(() => fixture.detectChanges())
.toThrowError(/compareWith must be a function, but received null/);
});
@ -238,7 +239,6 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
expect(select.nativeElement.value).toEqual('3: Object');
expect(nyOption.nativeElement.selected).toBe(true);
});
});
describe('in template-driven forms', () => {
@ -336,7 +336,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
dispatchEvent(select.nativeElement, 'change');
fixture.detectChanges();
tick();
expect(comp.selectedCity !['name']).toEqual('NYC');
expect(comp.selectedCity!['name']).toEqual('NYC');
select.nativeElement.value = '0: null';
dispatchEvent(select.nativeElement, 'change');
@ -348,7 +348,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
it('should throw an error when compareWith is not a function', () => {
const fixture = initTest(NgModelSelectWithCustomCompareFnForm);
const comp = fixture.componentInstance;
comp.compareFn = null !;
comp.compareFn = null!;
expect(() => fixture.detectChanges())
.toThrowError(/compareWith must be a function, but received null/);
});
@ -398,16 +398,11 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
expect(select.nativeElement.value).toEqual('3: Object');
expect(nyOption.nativeElement.selected).toBe(true);
}));
});
});
describe('select multiple controls', () => {
describe('in reactive forms', () => {
it('should support primitive values', () => {
if (isNode) return;
const fixture = initTest(FormControlSelectMultiple);
@ -432,7 +427,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
it('should throw an error when compareWith is not a function', () => {
const fixture = initTest(FormControlSelectMultipleWithCompareFn);
fixture.componentInstance.compareFn = null !;
fixture.componentInstance.compareFn = null!;
expect(() => fixture.detectChanges())
.toThrowError(/compareWith must be a function, but received null/);
});
@ -448,7 +443,6 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
expect(select.nativeElement.value).toEqual('0: Object');
expect(sfOption.nativeElement.selected).toBe(true);
}));
});
describe('in template-driven forms', () => {
@ -520,7 +514,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
it('should throw an error when compareWith is not a function', () => {
const fixture = initTest(NgModelSelectMultipleWithCustomCompareFnForm);
const comp = fixture.componentInstance;
comp.compareFn = null !;
comp.compareFn = null!;
expect(() => fixture.detectChanges())
.toThrowError(/compareWith must be a function, but received null/);
});
@ -539,13 +533,10 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
expect(select.nativeElement.value).toEqual('0: Object');
expect(sfOption.nativeElement.selected).toBe(true);
}));
});
describe('should support <type=radio>', () => {
describe('in reactive forms', () => {
it('should support basic functionality', () => {
const fixture = initTest(FormControlRadioButtons);
const form =
@ -562,10 +553,10 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
fixture.detectChanges();
// view -> model
expect(form.get('food') !.value).toEqual('chicken');
expect(form.get('food')!.value).toEqual('chicken');
expect(inputs[1].nativeElement.checked).toEqual(false);
form.get('food') !.setValue('fish');
form.get('food')!.setValue('fish');
fixture.detectChanges();
// programmatic change -> view
@ -606,16 +597,16 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
fixture.componentInstance.form = form;
fixture.detectChanges();
form.get('food') !.setValue(null);
form.get('food')!.setValue(null);
fixture.detectChanges();
const inputs = fixture.debugElement.queryAll(By.css('input'));
expect(inputs[0].nativeElement.checked).toEqual(false);
form.get('food') !.setValue('chicken');
form.get('food')!.setValue('chicken');
fixture.detectChanges();
form.get('food') !.setValue(undefined);
form.get('food')!.setValue(undefined);
fixture.detectChanges();
expect(inputs[0].nativeElement.checked).toEqual(false);
});
@ -706,13 +697,12 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
fixture.detectChanges();
// view -> model
expect(form.get('food') !.value).toEqual('chicken');
expect(form.get('nested.food') !.value).toEqual('fish');
expect(form.get('food')!.value).toEqual('chicken');
expect(form.get('nested.food')!.value).toEqual('fish');
expect(inputs[1].nativeElement.checked).toEqual(false);
expect(inputs[2].nativeElement.checked).toEqual(false);
expect(inputs[3].nativeElement.checked).toEqual(true);
});
it('should disable all radio buttons when disable() is called', () => {
@ -728,7 +718,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
expect(inputs[2].nativeElement.disabled).toEqual(false);
expect(inputs[3].nativeElement.disabled).toEqual(false);
form.get('food') !.disable();
form.get('food')!.disable();
expect(inputs[0].nativeElement.disabled).toEqual(true);
expect(inputs[1].nativeElement.disabled).toEqual(true);
expect(inputs[2].nativeElement.disabled).toEqual(false);
@ -780,7 +770,6 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
expect(inputs[0].nativeElement.checked).toBe(false);
expect(inputs[1].nativeElement.checked).toBe(true);
});
});
describe('in template-driven forms', () => {
@ -860,7 +849,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
fixture.detectChanges();
tick();
fixture.componentInstance.food = null !;
fixture.componentInstance.food = null!;
fixture.detectChanges();
tick();
@ -872,7 +861,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
fixture.detectChanges();
tick();
fixture.componentInstance.food = undefined !;
fixture.componentInstance.food = undefined!;
fixture.detectChanges();
tick();
expect(inputs[0].nativeElement.checked).toEqual(false);
@ -886,7 +875,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
tick();
const form = fixture.debugElement.children[0].injector.get(NgForm);
form.control.get('food') !.disable();
form.control.get('food')!.disable();
tick();
const inputs = fixture.debugElement.queryAll(By.css('input'));
@ -911,15 +900,11 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
expect(inputs[2].nativeElement.disabled).toBe(false);
expect(inputs[3].nativeElement.disabled).toBe(false);
}));
});
});
describe('should support <type=range>', () => {
describe('in reactive forms', () => {
it('with basic use case', () => {
const fixture = initTest(FormControlRangeInput);
const control = new FormControl(10);
@ -968,7 +953,6 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
const input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toEqual('');
});
});
describe('in template-driven forms', () => {
@ -987,15 +971,12 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
tick();
// view -> model
fixture.detectChanges();
expect(typeof(fixture.componentInstance.val)).toBe('number');
expect(typeof (fixture.componentInstance.val)).toBe('number');
}));
});
});
describe('custom value accessors', () => {
describe('in reactive forms', () => {
it('should support basic functionality', () => {
const fixture = initTest(WrappedValueForm, WrappedValue);
@ -1014,9 +995,9 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
expect(form.value).toEqual({'login': 'bb'});
// custom validator
expect(form.get('login') !.errors).toEqual({'err': true});
expect(form.get('login')!.errors).toEqual({'err': true});
form.setValue({login: 'expected'});
expect(form.get('login') !.errors).toEqual(null);
expect(form.get('login')!.errors).toEqual(null);
});
it('should support non builtin input elements that fire a change event without a \'target\' property',
@ -1042,7 +1023,7 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
});
fixture.detectChanges();
expect(fixture.componentInstance.form.status).toEqual('DISABLED');
expect(fixture.componentInstance.form.get('login') !.status).toEqual('DISABLED');
expect(fixture.componentInstance.form.get('login')!.status).toEqual('DISABLED');
});
it('should support custom accessors without setDisabledState - formControlDirective',
@ -1061,9 +1042,9 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
fixture.componentInstance.form = new FormGroup({'login': new FormControl('aa')});
fixture.detectChanges();
expect(fixture.componentInstance.myInput !.control).toBeDefined();
expect(fixture.componentInstance.myInput !.control)
.toEqual(fixture.componentInstance.myInput !.controlDir.control);
expect(fixture.componentInstance.myInput!.control).toBeDefined();
expect(fixture.componentInstance.myInput!.control)
.toEqual(fixture.componentInstance.myInput!.controlDir.control);
});
});
@ -1089,16 +1070,14 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
});
}));
});
});
});
}
@Component({selector: 'form-control-comp', template: `<input type="text" [formControl]="control">`})
export class FormControlComp {
// TODO(issue/24571): remove '!'.
control !: FormControl;
control!: FormControl;
}
@Component({
@ -1110,13 +1089,13 @@ export class FormControlComp {
})
export class FormGroupComp {
// TODO(issue/24571): remove '!'.
control !: FormControl;
control!: FormControl;
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
// TODO(issue/24571): remove '!'.
myGroup !: FormGroup;
myGroup!: FormGroup;
// TODO(issue/24571): remove '!'.
event !: Event;
event!: Event;
}
@Component({
@ -1125,7 +1104,7 @@ export class FormGroupComp {
})
class FormControlNumberInput {
// TODO(issue/24571): remove '!'.
control !: FormControl;
control!: FormControl;
}
@Component({
@ -1167,7 +1146,7 @@ class FormControlSelectNgValue {
})
class FormControlSelectWithCompareFn {
compareFn:
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2 ? o1.id === o2.id : o1 === o2
cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
form = new FormGroup({city: new FormControl({id: 1, name: 'SF'})});
}
@ -1211,7 +1190,7 @@ class FormControlSelectMultipleNgValue {
})
class FormControlSelectMultipleWithCompareFn {
compareFn:
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2 ? o1.id === o2.id : o1 === o2
cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
form = new FormGroup({city: new FormControl([{id: 1, name: 'SF'}])});
}
@ -1254,7 +1233,7 @@ class NgModelSelectWithNullForm {
})
class NgModelSelectWithCustomCompareFnForm {
compareFn:
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2 ? o1.id === o2.id : o1 === o2
selectedCity: any = {};
cities: any[] = [];
}
@ -1270,7 +1249,7 @@ class NgModelSelectWithCustomCompareFnForm {
})
class NgModelSelectMultipleWithCustomCompareFnForm {
compareFn:
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2
(o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2 ? o1.id === o2.id : o1 === o2
selectedCities: any[] = [];
cities: any[] = [];
}
@ -1285,7 +1264,7 @@ class NgModelSelectMultipleWithCustomCompareFnForm {
})
class NgModelSelectMultipleForm {
// TODO(issue/24571): remove '!'.
selectedCities !: any[];
selectedCities!: any[];
cities: any[] = [];
}
@ -1295,7 +1274,7 @@ class NgModelSelectMultipleForm {
})
class FormControlRangeInput {
// TODO(issue/24571): remove '!'.
control !: FormControl;
control!: FormControl;
}
@Component({selector: 'ng-model-range-form', template: '<input type="range" [(ngModel)]="val">'})
@ -1317,7 +1296,7 @@ class NgModelRangeForm {
})
export class FormControlRadioButtons {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
showRadio = new FormControl('yes');
}
@ -1335,9 +1314,9 @@ export class FormControlRadioButtons {
})
class NgModelRadioForm {
// TODO(issue/24571): remove '!'.
food !: string;
food!: string;
// TODO(issue/24571): remove '!'.
drink !: string;
drink!: string;
}
@Directive({
@ -1351,37 +1330,55 @@ class NgModelRadioForm {
class WrappedValue implements ControlValueAccessor {
value: any;
// TODO(issue/24571): remove '!'.
onChange !: Function;
onChange!: Function;
writeValue(value: any) { this.value = `!${value}!`; }
writeValue(value: any) {
this.value = `!${value}!`;
}
registerOnChange(fn: (value: any) => void) { this.onChange = fn; }
registerOnChange(fn: (value: any) => void) {
this.onChange = fn;
}
registerOnTouched(fn: any) {}
handleOnInput(value: any) { this.onChange(value.substring(1, value.length - 1)); }
handleOnInput(value: any) {
this.onChange(value.substring(1, value.length - 1));
}
validate(c: AbstractControl) { return c.value === 'expected' ? null : {'err': true}; }
validate(c: AbstractControl) {
return c.value === 'expected' ? null : {'err': true};
}
}
@Component({selector: 'my-input', template: ''})
export class MyInput implements ControlValueAccessor {
@Output('input') onInput = new EventEmitter();
// TODO(issue/24571): remove '!'.
value !: string;
value!: string;
control: AbstractControl|null = null;
constructor(public controlDir: NgControl) { controlDir.valueAccessor = this; }
constructor(public controlDir: NgControl) {
controlDir.valueAccessor = this;
}
ngOnInit() { this.control = this.controlDir.control; }
ngOnInit() {
this.control = this.controlDir.control;
}
writeValue(value: any) { this.value = `!${value}!`; }
writeValue(value: any) {
this.value = `!${value}!`;
}
registerOnChange(fn: (value: any) => void) { this.onInput.subscribe({next: fn}); }
registerOnChange(fn: (value: any) => void) {
this.onInput.subscribe({next: fn});
}
registerOnTouched(fn: any) {}
dispatchChangeEvent() { this.onInput.emit(this.value.substring(1, this.value.length - 1)); }
dispatchChangeEvent() {
this.onInput.emit(this.value.substring(1, this.value.length - 1));
}
}
@Component({
@ -1393,7 +1390,7 @@ export class MyInput implements ControlValueAccessor {
})
export class MyInputForm {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
@ViewChild(MyInput) myInput: MyInput|null = null;
}
@ -1406,7 +1403,7 @@ export class MyInputForm {
})
class WrappedValueForm {
// TODO(issue/24571): remove '!'.
form !: FormGroup;
form!: FormGroup;
}
@Component({
@ -1418,18 +1415,24 @@ class WrappedValueForm {
})
export class NgModelCustomComp implements ControlValueAccessor {
// TODO(issue/24571): remove '!'.
model !: string;
model!: string;
@Input('disabled') isDisabled: boolean = false;
// TODO(issue/24571): remove '!'.
changeFn !: (value: any) => void;
changeFn!: (value: any) => void;
writeValue(value: any) { this.model = value; }
writeValue(value: any) {
this.model = value;
}
registerOnChange(fn: (value: any) => void) { this.changeFn = fn; }
registerOnChange(fn: (value: any) => void) {
this.changeFn = fn;
}
registerOnTouched() {}
setDisabledState(isDisabled: boolean) { this.isDisabled = isDisabled; }
setDisabledState(isDisabled: boolean) {
this.isDisabled = isDisabled;
}
}
@Component({
@ -1442,6 +1445,6 @@ export class NgModelCustomComp implements ControlValueAccessor {
})
export class NgModelCustomWrapper {
// TODO(issue/24571): remove '!'.
name !: string;
name!: string;
isDisabled = false;
}