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

40
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,7 +77,9 @@ 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);
}
}
/**
@ -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() {

59
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';
@ -65,10 +65,10 @@ const resolvedPromise = (() => Promise.resolve(null))();
* 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`.
* 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 `SelectControlValueAccessor`
@ -114,8 +114,8 @@ const resolvedPromise = (() => Promise.resolve(null))();
*
* ### 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,11 +200,12 @@ export class NgModel extends NgControl implements OnChanges,
*/
@Output('ngModelChange') update = new EventEmitter();
constructor(@Optional() @Host() parent: ControlContainer,
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[]) {
@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 || [];
@ -239,7 +238,9 @@ export class NgModel extends NgControl implements OnChanges,
* Lifecycle method called before the directive's instance is destroyed. For internal
* use only.
*/
ngOnDestroy(): void { this.formDirective && this.formDirective.removeControl(this); }
ngOnDestroy(): void {
this.formDirective && this.formDirective.removeControl(this);
}
/**
* @description
@ -254,14 +255,18 @@ export class NgModel extends NgControl implements OnChanges,
* @description
* The top-level directive for this control 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
@ -285,8 +290,7 @@ export class NgModel extends NgControl implements OnChanges,
private _setUpControl(): void {
this._setUpdateStrategy();
this._isStandalone() ? this._setUpStandalone() :
this.formDirective.addControl(this);
this._isStandalone() ? this._setUpStandalone() : this.formDirective.addControl(this);
this._registered = true;
}
@ -316,8 +320,7 @@ export class NgModel extends NgControl implements OnChanges,
if (!(this._parent instanceof NgModelGroup) &&
this._parent instanceof AbstractFormGroupDirective) {
TemplateDrivenErrors.formGroupNameException();
} else if (
!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
} else if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
TemplateDrivenErrors.modelParentException();
}
}
@ -331,15 +334,15 @@ export class NgModel extends NgControl implements OnChanges,
}
private _updateValue(value: any): void {
resolvedPromise.then(
() => { this.control.setValue(value, {emitViewToModelChange: false}); });
resolvedPromise.then(() => {
this.control.setValue(value, {emitViewToModelChange: false});
});
}
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) {

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.

39
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';
@ -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,11 +166,13 @@ 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) {
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 || [];
@ -185,14 +189,13 @@ export class FormControlDirective extends NgControl implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
if (this._isControlChanged(changes)) {
setUpControl(this.form, this);
if (this.control.disabled && this.valueAccessor !.setDisabledState) {
this.valueAccessor !.setDisabledState !(true);
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);
_ngModelWarning('formControl', FormControlDirective, this, this._ngModelWarningConfig);
this.form.setValue(this.model);
this.viewModel = this.model;
}
@ -203,14 +206,18 @@ export class FormControlDirective extends NgControl implements OnChanges {
* 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 []; }
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); }
get validator(): ValidatorFn|null {
return composeValidators(this._rawValidators);
}
/**
* @description
@ -225,7 +232,9 @@ export class FormControlDirective extends NgControl implements OnChanges {
* @description
* The `FormControl` bound to this directive.
*/
get control(): FormControl { return this.form; }
get control(): FormControl {
return this.form;
}
/**
* @description

28
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';
@ -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;
}

52
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';
@ -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,

28
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,15 +36,15 @@ 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`
*
@ -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) ||

79
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';
@ -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,7 +192,9 @@ export class RequiredValidator implements Validator {
*
* @param fn The callback function
*/
registerOnValidatorChange(fn: () => void): void { this._onChange = fn; }
registerOnValidatorChange(fn: () => void): void {
this._onChange = fn;
}
}
@ -204,7 +208,8 @@ export class RequiredValidator implements Validator {
*
* ### 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>
@ -251,7 +256,8 @@ export const EMAIL_VALIDATOR: any = {
*
* ### 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>
@ -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
@ -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(
@ -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(
@ -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}
]
};
}
}

188
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!;
}
}
@ -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;
}
}
}
@ -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;
}
@ -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', () => {

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

@ -10,28 +10,31 @@ import {fakeAsync, tick} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, describe, inject, it} from '@angular/core/testing/src/testing_internal';
import {AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, ValidatorFn} from '@angular/forms';
import {Validators} from '@angular/forms/src/validators';
import {of } from 'rxjs';
import {of} from 'rxjs';
(function() {
function asyncValidator(expected: string, timeouts = {}) {
function asyncValidator(expected: string, timeouts = {}) {
return (c: AbstractControl) => {
let resolve: (result: any) => void = undefined !;
const promise = new Promise<ValidationErrors|null>(res => { resolve = res; });
let resolve: (result: any) => void = undefined!;
const promise = new Promise<ValidationErrors|null>(res => {
resolve = res;
});
const t = (timeouts as any)[c.value] != null ? (timeouts as any)[c.value] : 0;
const res = c.value != expected ? {'async': true} : null;
if (t == 0) {
resolve(res);
} else {
setTimeout(() => { resolve(res); }, t);
setTimeout(() => {
resolve(res);
}, t);
}
return promise;
};
}
describe('FormArray', () => {
}
describe('FormArray', () => {
describe('adding/removing', () => {
let a: FormArray;
let c1: FormControl, c2: FormControl, c3: FormControl;
@ -103,7 +106,7 @@ import {of } from 'rxjs';
new FormGroup({'c2': new FormControl('v2'), 'c3': new FormControl('v3')}),
new FormArray([new FormControl('v4'), new FormControl('v5')])
]);
a.at(0).get('c3') !.disable();
a.at(0).get('c3')!.disable();
(a.at(1) as FormArray).at(1).disable();
expect(a.getRawValue()).toEqual([{'c2': 'v2', 'c3': 'v3'}, ['v4', 'v5']]);
@ -113,8 +116,7 @@ import {of } from 'rxjs';
describe('markAllAsTouched', () => {
it('should mark all descendants as touched', () => {
const formArray: FormArray = new FormArray([
new FormControl('v1'), new FormControl('v2'),
new FormGroup({'c1': new FormControl('v1')}),
new FormControl('v1'), new FormControl('v2'), new FormGroup({'c1': new FormControl('v1')}),
new FormArray([new FormGroup({'c2': new FormControl('v2')})])
]);
@ -254,10 +256,18 @@ import {of } from 'rxjs';
});
it('should not fire an event when explicitly specified', fakeAsync(() => {
form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
a.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c2.valueChanges.subscribe((value) => { throw 'Should not happen'; });
form.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
a.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c2.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
a.setValue(['one', 'two'], {emitEvent: false});
tick();
@ -369,10 +379,18 @@ import {of } from 'rxjs';
});
it('should not fire an event when explicitly specified', fakeAsync(() => {
form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
a.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c2.valueChanges.subscribe((value) => { throw 'Should not happen'; });
form.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
a.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c2.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
a.patchValue(['one', 'two'], {emitEvent: false});
tick();
@ -580,11 +598,21 @@ import {of } from 'rxjs';
});
it('should not fire an event when explicitly specified', fakeAsync(() => {
form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
a.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c2.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c3.valueChanges.subscribe((value) => { throw 'Should not happen'; });
form.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
a.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c2.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c3.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
a.reset([], {emitEvent: false});
tick();
@ -650,7 +678,9 @@ import {of } from 'rxjs';
a = new FormArray([c]);
});
it('should be false after creating a control', () => { expect(a.dirty).toEqual(false); });
it('should be false after creating a control', () => {
expect(a.dirty).toEqual(false);
});
it('should be true after changing the value of the control', () => {
c.markAsDirty();
@ -668,7 +698,9 @@ import {of } from 'rxjs';
a = new FormArray([c]);
});
it('should be false after creating a control', () => { expect(a.touched).toEqual(false); });
it('should be false after creating a control', () => {
expect(a.touched).toEqual(false);
});
it('should be true after child control is marked as touched', () => {
c.markAsTouched();
@ -734,7 +766,6 @@ import {of } from 'rxjs';
expect(logger).toEqual(['PENDING']);
});
});
});
describe('valueChanges', () => {
@ -764,7 +795,11 @@ import {of } from 'rxjs';
let controlCallbackIsCalled = false;
c1.valueChanges.subscribe({next: (value: any) => { controlCallbackIsCalled = true; }});
c1.valueChanges.subscribe({
next: (value: any) => {
controlCallbackIsCalled = true;
}
});
a.valueChanges.subscribe({
next: (value: any) => {
@ -806,7 +841,7 @@ import {of } from 'rxjs';
describe('get', () => {
it('should return null when path is null', () => {
const g = new FormGroup({});
expect(g.get(null !)).toEqual(null);
expect(g.get(null!)).toEqual(null);
});
it('should return null when path is empty', () => {
@ -825,22 +860,22 @@ import {of } from 'rxjs';
'nested': new FormGroup({'two': new FormControl('222')})
});
expect(g.get(['one']) !.value).toEqual('111');
expect(g.get('one') !.value).toEqual('111');
expect(g.get(['nested', 'two']) !.value).toEqual('222');
expect(g.get('nested.two') !.value).toEqual('222');
expect(g.get(['one'])!.value).toEqual('111');
expect(g.get('one')!.value).toEqual('111');
expect(g.get(['nested', 'two'])!.value).toEqual('222');
expect(g.get('nested.two')!.value).toEqual('222');
});
it('should return an element of an array', () => {
const g = new FormGroup({'array': new FormArray([new FormControl('111')])});
expect(g.get(['array', 0]) !.value).toEqual('111');
expect(g.get(['array', 0])!.value).toEqual('111');
});
});
describe('validator', () => {
function simpleValidator(c: AbstractControl): ValidationErrors|null {
return c.get([0]) !.value === 'correct' ? null : {'broken': true};
return c.get([0])!.value === 'correct' ? null : {'broken': true};
}
function arrayRequiredValidator(c: AbstractControl): ValidationErrors|null {
@ -894,11 +929,13 @@ import {of } from 'rxjs';
});
describe('asyncValidator', () => {
function otherObservableValidator() { return of ({'other': true}); }
function otherObservableValidator() {
return of({'other': true});
}
it('should run the async validator', fakeAsync(() => {
const c = new FormControl('value');
const g = new FormArray([c], null !, asyncValidator('expected'));
const g = new FormArray([c], null!, asyncValidator('expected'));
expect(g.pending).toEqual(true);
@ -922,7 +959,7 @@ import {of } from 'rxjs';
it('should set multiple async validators from an array', fakeAsync(() => {
const g = new FormArray(
[new FormControl('value')], null !,
[new FormControl('value')], null!,
[asyncValidator('expected'), otherObservableValidator]);
expect(g.pending).toEqual(true);
@ -1001,10 +1038,10 @@ import {of } from 'rxjs';
});
expect(g.valid).toBe(false);
g.get('nested') !.disable();
g.get('nested')!.disable();
expect(g.valid).toBe(true);
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.valid).toBe(false);
});
@ -1013,36 +1050,36 @@ import {of } from 'rxjs';
{nested: new FormArray([new FormControl('one')]), two: new FormControl('two')});
expect(g.value).toEqual({'nested': ['one'], 'two': 'two'});
g.get('nested') !.disable();
g.get('nested')!.disable();
expect(g.value).toEqual({'two': 'two'});
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.value).toEqual({'nested': ['one'], 'two': 'two'});
});
it('should ignore disabled controls when determining dirtiness', () => {
const g = new FormGroup({nested: a, two: new FormControl('two')});
g.get(['nested', 0]) !.markAsDirty();
g.get(['nested', 0])!.markAsDirty();
expect(g.dirty).toBe(true);
g.get('nested') !.disable();
expect(g.get('nested') !.dirty).toBe(true);
g.get('nested')!.disable();
expect(g.get('nested')!.dirty).toBe(true);
expect(g.dirty).toEqual(false);
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.dirty).toEqual(true);
});
it('should ignore disabled controls when determining touched state', () => {
const g = new FormGroup({nested: a, two: new FormControl('two')});
g.get(['nested', 0]) !.markAsTouched();
g.get(['nested', 0])!.markAsTouched();
expect(g.touched).toBe(true);
g.get('nested') !.disable();
expect(g.get('nested') !.touched).toBe(true);
g.get('nested')!.disable();
expect(g.get('nested')!.touched).toBe(true);
expect(g.touched).toEqual(false);
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.touched).toEqual(true);
});
@ -1109,7 +1146,7 @@ import {of } from 'rxjs';
});
it('should clear out async array errors when disabled', fakeAsync(() => {
const arr = new FormArray([new FormControl()], null !, asyncValidator('expected'));
const arr = new FormArray([new FormControl()], null!, asyncValidator('expected'));
tick();
expect(arr.errors).toEqual({'async': true});
@ -1122,7 +1159,7 @@ import {of } from 'rxjs';
}));
it('should re-populate async array errors when enabled from a child', fakeAsync(() => {
const arr = new FormArray([new FormControl()], null !, asyncValidator('expected'));
const arr = new FormArray([new FormControl()], null!, asyncValidator('expected'));
tick();
expect(arr.errors).toEqual({'async': true});
@ -1187,7 +1224,6 @@ import {of } from 'rxjs';
a.enable({emitEvent: false});
expect(logger).toEqual([]);
});
});
describe('setControl()', () => {
@ -1218,7 +1254,7 @@ import {of } from 'rxjs';
});
it('should remove control if new control is null', () => {
a.setControl(0, null !);
a.setControl(0, null!);
expect(a.controls[0]).not.toBeDefined();
expect(a.value).toEqual([]);
});
@ -1230,9 +1266,7 @@ import {of } from 'rxjs';
a.setControl(0, c2);
expect(logger).toEqual(['change!']);
});
});
});
});
});
})();

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

@ -8,16 +8,22 @@
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', () => {
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'});
@ -91,8 +97,7 @@ import {of } from 'rxjs';
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);
['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);
@ -100,8 +105,12 @@ import {of } from 'rxjs';
});
it('should create control arrays with multiple async validators', fakeAsync(() => {
function asyncValidator1() { return of ({'async1': true}); }
function asyncValidator2() { return of ({'async2': true}); }
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']);
@ -112,8 +121,12 @@ import {of } from 'rxjs';
}));
it('should create control arrays with multiple sync validators', () => {
function syncValidator1() { return {'sync1': true}; }
function syncValidator2() { return {'sync2': true}; }
function syncValidator1() {
return {'sync1': true};
}
function syncValidator2() {
return {'sync2': true};
}
const a = b.array(['one', 'two'], [syncValidator1, syncValidator2]);
expect(a.value).toEqual(['one', 'two']);
@ -140,15 +153,15 @@ import {of } from 'rxjs';
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.get('one') !.updateOn).toEqual('blur');
expect(g.get('two') !.updateOn).toEqual('blur');
expect(g.get('one')!.updateOn).toEqual('blur');
expect(g.get('two')!.updateOn).toEqual('blur');
});
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');
expect(a.get([0])!.updateOn).toEqual('blur');
expect(a.get([1])!.updateOn).toEqual('blur');
});
it('should set updateOn with nested groups', () => {
@ -158,9 +171,9 @@ import {of } from 'rxjs';
},
{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');
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', () => {
@ -170,17 +183,17 @@ import {of } from 'rxjs';
},
{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');
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');
expect(g.get('one')!.updateOn).toEqual('change');
expect(g.get('two')!.updateOn).toEqual('blur');
});
it('should set updateOn with complex setup', () => {
@ -191,12 +204,12 @@ import {of } from 'rxjs';
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');
});
});
});
});
})();

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

@ -14,34 +14,44 @@ import {AbstractControl, AsyncValidatorFn, FormControl, FormGroup, ValidationErr
import {FormArray} from '@angular/forms/src/model';
(function() {
function asyncValidator(expected: string, timeouts = {}): AsyncValidatorFn {
function asyncValidator(expected: string, timeouts = {}): AsyncValidatorFn {
return (c: AbstractControl) => {
let resolve: (result: any) => void = undefined !;
const promise = new Promise<ValidationErrors|null>(res => { resolve = res; });
let resolve: (result: any) => void = undefined!;
const promise = new Promise<ValidationErrors|null>(res => {
resolve = res;
});
const t = (timeouts as any)[c.value] != null ? (timeouts as any)[c.value] : 0;
const res = c.value != expected ? {'async': true} : null;
if (t == 0) {
resolve(res);
} else {
setTimeout(() => { resolve(res); }, t);
setTimeout(() => {
resolve(res);
}, t);
}
return promise;
};
}
}
function asyncValidatorReturningObservable(c: AbstractControl) {
function asyncValidatorReturningObservable(c: AbstractControl) {
const e = new EventEmitter();
Promise.resolve(null).then(() => { e.emit({'async': true}); });
Promise.resolve(null).then(() => {
e.emit({'async': true});
});
return e;
}
}
function otherAsyncValidator() { return Promise.resolve({'other': true}); }
function otherAsyncValidator() {
return Promise.resolve({'other': true});
}
function syncValidator(_: any /** TODO #9100 */): any /** TODO #9100 */ { return null; }
function syncValidator(_: any /** TODO #9100 */): any /** TODO #9100 */ {
return null;
}
describe('FormControl', () => {
describe('FormControl', () => {
it('should default the value to null', () => {
const c = new FormControl();
expect(c.value).toBe(null);
@ -58,7 +68,7 @@ import {FormArray} from '@angular/forms/src/model';
describe('boxed values', () => {
it('should support valid boxed values on creation', () => {
const c = new FormControl({value: 'some val', disabled: true}, null !, null !);
const c = new FormControl({value: 'some val', disabled: true}, null!, null!);
expect(c.disabled).toBe(true);
expect(c.value).toBe('some val');
expect(c.status).toBe('DISABLED');
@ -72,21 +82,19 @@ import {FormArray} from '@angular/forms/src/model';
});
it('should not treat objects as boxed values if they have more than two props', () => {
const c = new FormControl({value: '', disabled: true, test: 'test'}, null !, null !);
const c = new FormControl({value: '', disabled: true, test: 'test'}, null!, null!);
expect(c.value).toEqual({value: '', disabled: true, test: 'test'});
expect(c.disabled).toBe(false);
});
it('should not treat objects as boxed values if disabled is missing', () => {
const c = new FormControl({value: '', test: 'test'}, null !, null !);
const c = new FormControl({value: '', test: 'test'}, null!, null!);
expect(c.value).toEqual({value: '', test: 'test'});
expect(c.disabled).toBe(false);
});
});
describe('updateOn', () => {
it('should default to on change', () => {
const c = new FormControl('');
expect(c.updateOn).toEqual('change');
@ -107,15 +115,15 @@ import {FormArray} from '@angular/forms/src/model';
const g =
new FormGroup({one: new FormControl(), two: new FormControl()}, {updateOn: 'blur'});
expect(g.get('one') !.updateOn).toEqual('blur');
expect(g.get('two') !.updateOn).toEqual('blur');
expect(g.get('one')!.updateOn).toEqual('blur');
expect(g.get('two')!.updateOn).toEqual('blur');
});
it('should default to array updateOn when not set in control', () => {
const a = new FormArray([new FormControl(), new FormControl()], {updateOn: 'blur'});
expect(a.get([0]) !.updateOn).toEqual('blur');
expect(a.get([1]) !.updateOn).toEqual('blur');
expect(a.get([0])!.updateOn).toEqual('blur');
expect(a.get([1])!.updateOn).toEqual('blur');
});
it('should set updateOn with nested groups', () => {
@ -125,9 +133,9 @@ import {FormArray} from '@angular/forms/src/model';
},
{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');
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', () => {
@ -137,9 +145,9 @@ import {FormArray} from '@angular/forms/src/model';
},
{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');
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', () => {
@ -147,8 +155,8 @@ import {FormArray} from '@angular/forms/src/model';
{one: new FormControl('', {updateOn: 'change'}), two: new FormControl()},
{updateOn: 'blur'});
expect(g.get('one') !.updateOn).toEqual('change');
expect(g.get('two') !.updateOn).toEqual('blur');
expect(g.get('one')!.updateOn).toEqual('change');
expect(g.get('two')!.updateOn).toEqual('blur');
});
it('should set updateOn with complex setup', () => {
@ -160,19 +168,15 @@ import {FormArray} from '@angular/forms/src/model';
three: new FormControl()
});
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');
});
});
});
describe('validator', () => {
it('should run validator with the initial value', () => {
const c = new FormControl('value', Validators.required);
expect(c.valid).toEqual(true);
@ -203,8 +207,7 @@ import {FormArray} from '@angular/forms/src/model';
});
it('should support multiple validators from options obj', () => {
const c =
new FormControl(null, {validators: [Validators.required, Validators.minLength(3)]});
const c = new FormControl(null, {validators: [Validators.required, Validators.minLength(3)]});
expect(c.valid).toEqual(false);
expect(c.errors).toEqual({required: true});
@ -285,7 +288,7 @@ import {FormArray} from '@angular/forms/src/model';
describe('asyncValidator', () => {
it('should run validator with the initial value', fakeAsync(() => {
const c = new FormControl('value', null !, asyncValidator('expected'));
const c = new FormControl('value', null!, asyncValidator('expected'));
tick();
expect(c.valid).toEqual(false);
@ -293,7 +296,7 @@ import {FormArray} from '@angular/forms/src/model';
}));
it('should support validators returning observables', fakeAsync(() => {
const c = new FormControl('value', null !, asyncValidatorReturningObservable);
const c = new FormControl('value', null!, asyncValidatorReturningObservable);
tick();
expect(c.valid).toEqual(false);
@ -301,7 +304,7 @@ import {FormArray} from '@angular/forms/src/model';
}));
it('should rerun the validator when the value changes', fakeAsync(() => {
const c = new FormControl('value', null !, asyncValidator('expected'));
const c = new FormControl('value', null!, asyncValidator('expected'));
c.setValue('expected');
tick();
@ -322,7 +325,7 @@ import {FormArray} from '@angular/forms/src/model';
}));
it('should mark the control as pending while running the async validation', fakeAsync(() => {
const c = new FormControl('', null !, asyncValidator('expected'));
const c = new FormControl('', null!, asyncValidator('expected'));
expect(c.pending).toEqual(true);
@ -332,8 +335,8 @@ import {FormArray} from '@angular/forms/src/model';
}));
it('should only use the latest async validation run', fakeAsync(() => {
const c = new FormControl(
'', null !, asyncValidator('expected', {'long': 200, 'expected': 100}));
const c =
new FormControl('', null!, asyncValidator('expected', {'long': 200, 'expected': 100}));
c.setValue('long');
c.setValue('expected');
@ -345,7 +348,7 @@ import {FormArray} from '@angular/forms/src/model';
it('should support arrays of async validator functions if passed', fakeAsync(() => {
const c =
new FormControl('value', null !, [asyncValidator('expected'), otherAsyncValidator]);
new FormControl('value', null!, [asyncValidator('expected'), otherAsyncValidator]);
tick();
expect(c.errors).toEqual({'async': true, 'other': true});
@ -386,7 +389,7 @@ import {FormArray} from '@angular/forms/src/model';
}));
it('should add single async validator', fakeAsync(() => {
const c = new FormControl('value', null !);
const c = new FormControl('value', null!);
c.setAsyncValidators(asyncValidator('expected'));
expect(c.asyncValidator).not.toEqual(null);
@ -398,7 +401,7 @@ import {FormArray} from '@angular/forms/src/model';
}));
it('should add async validator from array', fakeAsync(() => {
const c = new FormControl('value', null !);
const c = new FormControl('value', null!);
c.setAsyncValidators([asyncValidator('expected')]);
expect(c.asyncValidator).not.toEqual(null);
@ -493,14 +496,18 @@ import {FormArray} from '@angular/forms/src/model';
});
it('should fire an event', fakeAsync(() => {
c.valueChanges.subscribe((value) => { expect(value).toEqual('newValue'); });
c.valueChanges.subscribe((value) => {
expect(value).toEqual('newValue');
});
c.setValue('newValue');
tick();
}));
it('should not fire an event when explicitly specified', fakeAsync(() => {
c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.setValue('newValue', {emitEvent: false});
tick();
@ -556,14 +563,18 @@ import {FormArray} from '@angular/forms/src/model';
});
it('should fire an event', fakeAsync(() => {
c.valueChanges.subscribe((value) => { expect(value).toEqual('newValue'); });
c.valueChanges.subscribe((value) => {
expect(value).toEqual('newValue');
});
c.patchValue('newValue');
tick();
}));
it('should not fire an event when explicitly specified', fakeAsync(() => {
c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.patchValue('newValue', {emitEvent: false});
@ -583,7 +594,9 @@ import {FormArray} from '@angular/forms/src/model';
describe('reset()', () => {
let c: FormControl;
beforeEach(() => { c = new FormControl('initial value'); });
beforeEach(() => {
c = new FormControl('initial value');
});
it('should reset to a specific value if passed', () => {
c.setValue('new value');
@ -720,9 +733,15 @@ import {FormArray} from '@angular/forms/src/model';
});
it('should not fire an event when explicitly specified', fakeAsync(() => {
g.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c2.valueChanges.subscribe((value) => { throw 'Should not happen'; });
g.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c2.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.reset(null, {emitEvent: false});
@ -747,13 +766,14 @@ import {FormArray} from '@angular/forms/src/model';
expect(logger).toEqual(['control1', 'group']);
});
});
});
describe('valueChanges & statusChanges', () => {
let c: FormControl;
beforeEach(() => { c = new FormControl('old', Validators.required); });
beforeEach(() => {
c = new FormControl('old', Validators.required);
});
it('should fire an event after the value has been updated',
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
@ -887,7 +907,6 @@ import {FormArray} from '@angular/forms/src/model';
});
describe('disable() & enable()', () => {
it('should mark the control as disabled', () => {
const c = new FormControl(null);
expect(c.disabled).toBe(false);
@ -1144,7 +1163,7 @@ import {FormArray} from '@angular/forms/src/model';
});
it('should clear out async errors when disabled', fakeAsync(() => {
const c = new FormControl('', null !, asyncValidator('expected'));
const c = new FormControl('', null!, asyncValidator('expected'));
tick();
expect(c.errors).toEqual({'async': true});
@ -1176,7 +1195,6 @@ import {FormArray} from '@angular/forms/src/model';
c.enable();
expect(logger).toEqual(['DISABLED', 'INVALID']);
});
it('should emit status change events in correct order', () => {
@ -1214,15 +1232,18 @@ import {FormArray} from '@angular/forms/src/model';
c.enable({emitEvent: false});
expect(logger).toEqual([]);
});
});
});
describe('pending', () => {
let c: FormControl;
beforeEach(() => { c = new FormControl('value'); });
beforeEach(() => {
c = new FormControl('value');
});
it('should be false after creating a control', () => { expect(c.pending).toEqual(false); });
it('should be false after creating a control', () => {
expect(c.pending).toEqual(false);
});
it('should be true after changing the value of the control', () => {
c.markAsPending();
@ -1246,8 +1267,7 @@ import {FormArray} from '@angular/forms/src/model';
c.markAsPending({emitEvent: false});
expect(logger).toEqual([]);
});
});
});
});
});
})();

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

@ -10,40 +10,48 @@ import {EventEmitter} from '@angular/core';
import {async, fakeAsync, tick} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, describe, inject, it} from '@angular/core/testing/src/testing_internal';
import {AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, Validators} from '@angular/forms';
import {of } from 'rxjs';
import {of} from 'rxjs';
(function() {
function simpleValidator(c: AbstractControl): ValidationErrors|null {
return c.get('one') !.value === 'correct' ? null : {'broken': true};
}
function simpleValidator(c: AbstractControl): ValidationErrors|null {
return c.get('one')!.value === 'correct' ? null : {'broken': true};
}
function asyncValidator(expected: string, timeouts = {}) {
function asyncValidator(expected: string, timeouts = {}) {
return (c: AbstractControl) => {
let resolve: (result: any) => void = undefined !;
const promise = new Promise<ValidationErrors|null>(res => { resolve = res; });
let resolve: (result: any) => void = undefined!;
const promise = new Promise<ValidationErrors|null>(res => {
resolve = res;
});
const t = (timeouts as any)[c.value] != null ? (timeouts as any)[c.value] : 0;
const res = c.value != expected ? {'async': true} : null;
if (t == 0) {
resolve(res);
} else {
setTimeout(() => { resolve(res); }, t);
setTimeout(() => {
resolve(res);
}, t);
}
return promise;
};
}
}
function asyncValidatorReturningObservable(c: AbstractControl) {
function asyncValidatorReturningObservable(c: AbstractControl) {
const e = new EventEmitter();
Promise.resolve(null).then(() => { e.emit({'async': true}); });
Promise.resolve(null).then(() => {
e.emit({'async': true});
});
return e;
}
}
function otherObservableValidator() { return of ({'other': true}); }
function otherObservableValidator() {
return of({'other': true});
}
describe('FormGroup', () => {
describe('FormGroup', () => {
describe('value', () => {
it('should be the reduced value of the child controls', () => {
const g = new FormGroup({'one': new FormControl('111'), 'two': new FormControl('222')});
@ -77,13 +85,12 @@ import {of } from 'rxjs';
'group': new FormGroup({'c2': new FormControl('v2'), 'c3': new FormControl('v3')}),
'array': new FormArray([new FormControl('v4'), new FormControl('v5')])
});
fg.get('group') !.get('c3') !.disable();
fg.get('group')!.get('c3')!.disable();
(fg.get('array') as FormArray).at(1).disable();
expect(fg.getRawValue())
.toEqual({'c1': 'v1', 'group': {'c2': 'v2', 'c3': 'v3'}, 'array': ['v4', 'v5']});
});
});
describe('markAllAsTouched', () => {
@ -92,8 +99,7 @@ import {of } from 'rxjs';
'c1': new FormControl('v1'),
'group': new FormGroup({'c2': new FormControl('v2'), 'c3': new FormControl('v3')}),
'array': new FormArray([
new FormControl('v4'), new FormControl('v5'),
new FormGroup({'c4': new FormControl('v4')})
new FormControl('v4'), new FormControl('v5'), new FormGroup({'c4': new FormControl('v4')})
])
});
@ -180,7 +186,9 @@ import {of } from 'rxjs';
g = new FormGroup({'one': c});
});
it('should be false after creating a control', () => { expect(g.dirty).toEqual(false); });
it('should be false after creating a control', () => {
expect(g.dirty).toEqual(false);
});
it('should be true after changing the value of the control', () => {
c.markAsDirty();
@ -198,7 +206,9 @@ import {of } from 'rxjs';
g = new FormGroup({'one': c});
});
it('should be false after creating a control', () => { expect(g.touched).toEqual(false); });
it('should be false after creating a control', () => {
expect(g.touched).toEqual(false);
});
it('should be true after control is marked as touched', () => {
c.markAsTouched();
@ -302,9 +312,15 @@ import {of } from 'rxjs';
});
it('should not fire an event when explicitly specified', fakeAsync(() => {
form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
g.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
form.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
g.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
g.setValue({'one': 'one', 'two': 'two'}, {emitEvent: false});
tick();
@ -416,9 +432,15 @@ import {of } from 'rxjs';
});
it('should not fire an event when explicitly specified', fakeAsync(() => {
form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
g.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
form.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
g.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
g.patchValue({'one': 'one', 'two': 'two'}, {emitEvent: false});
tick();
@ -625,9 +647,15 @@ import {of } from 'rxjs';
});
it('should not fire an event when explicitly specified', fakeAsync(() => {
form.valueChanges.subscribe((value) => { throw 'Should not happen'; });
g.valueChanges.subscribe((value) => { throw 'Should not happen'; });
c.valueChanges.subscribe((value) => { throw 'Should not happen'; });
form.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
g.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
c.valueChanges.subscribe((value) => {
throw 'Should not happen';
});
g.reset({}, {emitEvent: false});
tick();
@ -672,7 +700,6 @@ import {of } from 'rxjs';
form.reset();
});
});
});
describe('contains', () => {
@ -685,11 +712,13 @@ import {of } from 'rxjs';
});
});
it('should return false when the component is disabled',
() => { expect(group.contains('optional')).toEqual(false); });
it('should return false when the component is disabled', () => {
expect(group.contains('optional')).toEqual(false);
});
it('should return false when there is no component with the given name',
() => { expect(group.contains('something else')).toEqual(false); });
it('should return false when there is no component with the given name', () => {
expect(group.contains('something else')).toEqual(false);
});
it('should return true when the component is enabled', () => {
expect(group.contains('required')).toEqual(true);
@ -716,8 +745,9 @@ import {of } from 'rxjs';
});
});
it('should not get inherited properties',
() => { expect(group.get('constructor')).toBe(null); });
it('should not get inherited properties', () => {
expect(group.get('constructor')).toBe(null);
});
});
describe('statusChanges', () => {
@ -829,9 +859,8 @@ import {of } from 'rxjs';
});
describe('validator', () => {
function containsValidator(c: AbstractControl): ValidationErrors|null {
return c.get('one') !.value && c.get('one') !.value.indexOf('c') !== -1 ? null :
return c.get('one')!.value && c.get('one')!.value.indexOf('c') !== -1 ? null :
{'missing': true};
}
@ -885,13 +914,12 @@ import {of } from 'rxjs';
g.setValue({one: 'correct'});
expect(g.valid).toEqual(true);
});
});
describe('asyncValidator', () => {
it('should run the async validator', fakeAsync(() => {
const c = new FormControl('value');
const g = new FormGroup({'one': c}, null !, asyncValidator('expected'));
const g = new FormGroup({'one': c}, null!, asyncValidator('expected'));
expect(g.pending).toEqual(true);
@ -903,7 +931,7 @@ import {of } from 'rxjs';
it('should set multiple async validators from array', fakeAsync(() => {
const g = new FormGroup(
{'one': new FormControl('value')}, null !,
{'one': new FormControl('value')}, null!,
[asyncValidator('expected'), otherObservableValidator]);
expect(g.pending).toEqual(true);
@ -934,7 +962,7 @@ import {of } from 'rxjs';
}));
it('should set the parent group\'s status to pending', fakeAsync(() => {
const c = new FormControl('value', null !, asyncValidator('expected'));
const c = new FormControl('value', null!, asyncValidator('expected'));
const g = new FormGroup({'one': c});
expect(g.pending).toEqual(true);
@ -944,15 +972,14 @@ import {of } from 'rxjs';
expect(g.pending).toEqual(false);
}));
it('should run the parent group\'s async validator when children are pending',
fakeAsync(() => {
const c = new FormControl('value', null !, asyncValidator('expected'));
const g = new FormGroup({'one': c}, null !, asyncValidator('expected'));
it('should run the parent group\'s async validator when children are pending', fakeAsync(() => {
const c = new FormControl('value', null!, asyncValidator('expected'));
const g = new FormGroup({'one': c}, null!, asyncValidator('expected'));
tick(1);
expect(g.errors).toEqual({'async': true});
expect(g.get('one') !.errors).toEqual({'async': true});
expect(g.get('one')!.errors).toEqual({'async': true});
}));
});
@ -1005,10 +1032,10 @@ import {of } from 'rxjs';
});
expect(g.valid).toBe(false);
g.get('nested') !.disable();
g.get('nested')!.disable();
expect(g.valid).toBe(true);
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.valid).toBe(false);
});
@ -1017,10 +1044,10 @@ import {of } from 'rxjs';
{nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
expect(g.value).toEqual({'nested': {'one': 'one'}, 'two': 'two'});
g.get('nested') !.disable();
g.get('nested')!.disable();
expect(g.value).toEqual({'two': 'two'});
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.value).toEqual({'nested': {'one': 'one'}, 'two': 'two'});
});
@ -1028,13 +1055,13 @@ import {of } from 'rxjs';
const g = new FormGroup(
{nested: new FormGroup({one: new FormControl('one'), two: new FormControl('two')})});
g.get('nested.two') !.disable();
g.get('nested.two')!.disable();
expect(g.value).toEqual({nested: {one: 'one'}});
g.get('nested') !.disable();
g.get('nested')!.disable();
expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
});
@ -1042,38 +1069,38 @@ import {of } from 'rxjs';
const g = new FormGroup(
{nested: new FormGroup({one: new FormControl('one'), two: new FormControl('two')})});
g.get('nested.two') !.disable();
g.get('nested.two')!.disable();
expect(g.value).toEqual({nested: {one: 'one'}});
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.value).toEqual({nested: {one: 'one', two: 'two'}});
});
it('should ignore disabled controls when determining dirtiness', () => {
const g = new FormGroup(
{nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
g.get('nested.one') !.markAsDirty();
g.get('nested.one')!.markAsDirty();
expect(g.dirty).toBe(true);
g.get('nested') !.disable();
expect(g.get('nested') !.dirty).toBe(true);
g.get('nested')!.disable();
expect(g.get('nested')!.dirty).toBe(true);
expect(g.dirty).toEqual(false);
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.dirty).toEqual(true);
});
it('should ignore disabled controls when determining touched state', () => {
const g = new FormGroup(
{nested: new FormGroup({one: new FormControl('one')}), two: new FormControl('two')});
g.get('nested.one') !.markAsTouched();
g.get('nested.one')!.markAsTouched();
expect(g.touched).toBe(true);
g.get('nested') !.disable();
expect(g.get('nested') !.touched).toBe(true);
g.get('nested')!.disable();
expect(g.get('nested')!.touched).toBe(true);
expect(g.touched).toEqual(false);
g.get('nested') !.enable();
g.get('nested')!.enable();
expect(g.touched).toEqual(true);
});
@ -1140,8 +1167,7 @@ import {of } from 'rxjs';
});
it('should clear out async group errors when disabled', fakeAsync(() => {
const g =
new FormGroup({'one': new FormControl()}, null !, asyncValidator('expected'));
const g = new FormGroup({'one': new FormControl()}, null!, asyncValidator('expected'));
tick();
expect(g.errors).toEqual({'async': true});
@ -1154,8 +1180,7 @@ import {of } from 'rxjs';
}));
it('should re-populate async group errors when enabled from a child', fakeAsync(() => {
const g =
new FormGroup({'one': new FormControl()}, null !, asyncValidator('expected'));
const g = new FormGroup({'one': new FormControl()}, null!, asyncValidator('expected'));
tick();
expect(g.errors).toEqual({'async': true});
@ -1220,9 +1245,7 @@ import {of } from 'rxjs';
g.enable({emitEvent: false});
expect(logger).toEqual([]);
});
});
});
describe('updateTreeValidity()', () => {
@ -1254,7 +1277,6 @@ import {of } from 'rxjs';
(form as any)._updateTreeValidity({emitEvent: false});
expect(logger).toEqual([]);
});
});
describe('setControl()', () => {
@ -1285,7 +1307,7 @@ import {of } from 'rxjs';
});
it('should remove control if new control is null', () => {
g.setControl('one', null !);
g.setControl('one', null!);
expect(g.controls['one']).not.toBeDefined();
expect(g.value).toEqual({});
});
@ -1297,7 +1319,6 @@ import {of } from 'rxjs';
g.setControl('one', c2);
expect(logger).toEqual(['change!']);
});
});
describe('pending', () => {
@ -1309,7 +1330,9 @@ import {of } from 'rxjs';
g = new FormGroup({'one': c});
});
it('should be false after creating a control', () => { expect(g.pending).toEqual(false); });
it('should be false after creating a control', () => {
expect(g.pending).toEqual(false);
});
it('should be true after changing the value of the control', () => {
c.markAsPending();
@ -1350,6 +1373,5 @@ import {of } from 'rxjs';
});
});
});
});
});
})();

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({

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

@ -11,19 +11,19 @@ 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 {
function validator(key: string, error: any): ValidatorFn {
return (c: AbstractControl) => {
const r: ValidationErrors = {};
r[key] = error;
return r;
};
}
}
class AsyncValidatorDirective implements AsyncValidator {
class AsyncValidatorDirective implements AsyncValidator {
constructor(private expected: string, private error: any) {}
validate(c: any): Observable<ValidationErrors> {
@ -33,21 +33,25 @@ import {first, map} from 'rxjs/operators';
obs.complete();
});
}
}
}
describe('Validators', () => {
describe('Validators', () => {
describe('min', () => {
it('should not error on an empty string',
() => { expect(Validators.min(2)(new FormControl(''))).toBeNull(); });
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 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 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 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}});
@ -57,14 +61,17 @@ import {first, map} from 'rxjs/operators';
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 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', () => {
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 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({
@ -72,25 +79,31 @@ import {first, map} from 'rxjs/operators';
});
});
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 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(); });
it('should return null if min value is null', () => {
expect(Validators.min(null as any)(new FormControl(3))).toBeNull();
});
});
describe('max', () => {
it('should not error on an empty string',
() => { expect(Validators.max(2)(new FormControl(''))).toBeNull(); });
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 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 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 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}});
@ -100,14 +113,17 @@ import {first, map} from 'rxjs/operators';
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 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', () => {
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 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({
@ -115,30 +131,36 @@ import {first, map} from 'rxjs/operators';
});
});
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 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 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 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 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 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 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}));
@ -170,17 +192,21 @@ import {first, map} from 'rxjs/operators';
});
describe('minLength', () => {
it('should not error on an empty string',
() => { expect(Validators.minLength(2)(new FormControl(''))).toBeNull(); });
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 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 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 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({
@ -202,17 +228,21 @@ import {first, map} from 'rxjs/operators';
});
describe('maxLength', () => {
it('should not error on an empty string',
() => { expect(Validators.maxLength(2)(new FormControl(''))).toBeNull(); });
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 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 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 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({
@ -234,18 +264,21 @@ import {first, map} from 'rxjs/operators';
});
describe('pattern', () => {
it('should not error on an empty string',
() => { expect(Validators.pattern('[a-zA-Z ]+')(new FormControl(''))).toBeNull(); });
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 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 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());
@ -269,10 +302,10 @@ import {first, map} from 'rxjs/operators';
});
it('should not error on "null" pattern',
() => expect(Validators.pattern(null !)(new FormControl('aaAA'))).toBeNull());
() => expect(Validators.pattern(null!)(new FormControl('aaAA'))).toBeNull());
it('should not error on "undefined" pattern',
() => expect(Validators.pattern(undefined !)(new FormControl('aaAA'))).toBeNull());
() => 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());
@ -288,32 +321,32 @@ import {first, map} from 'rxjs/operators';
});
describe('compose', () => {
it('should return null when given null',
() => { expect(Validators.compose(null !)).toBe(null); });
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)]) !;
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)]) !;
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]) !;
const c = Validators.compose([Validators.nullValidator, Validators.nullValidator])!;
expect(c(new FormControl(''))).toBeNull();
});
it('should ignore nulls', () => {
const c = Validators.compose([null !, Validators.required]) !;
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) => {
@ -322,57 +355,58 @@ import {first, map} from 'rxjs/operators';
};
}
it('should return null when given null',
() => { expect(Validators.composeAsync(null !)).toBeNull(); });
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})]) !;
[promiseValidator({'one': true}), promiseValidator({'two': true})])!;
let errorMap: {[key: string]: any}|null = undefined !;
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);
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
tick();
expect(errorMap !).toEqual({'one': true, 'two': true});
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}))]) !;
const v = Validators.composeAsync(
[normalizeAsyncValidator(new AsyncValidatorDirective('expected', {'one': true}))])!;
let errorMap: {[key: string]: any}|null = undefined !;
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);
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
tick();
expect(errorMap !).toEqual({'one': true});
expect(errorMap!).toEqual({'one': true});
}));
it('should return null when no errors', fakeAsync(() => {
const v = Validators.composeAsync([promiseValidator({'one': true})]) !;
const v = Validators.composeAsync([promiseValidator({'one': true})])!;
let errorMap: {[key: string]: any}|null = undefined !;
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);
.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 !]) !;
const v = Validators.composeAsync([promiseValidator({'one': true}), null!])!;
let errorMap: {[key: string]: any}|null = undefined !;
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);
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
tick();
expect(errorMap !).toEqual({'one': true});
expect(errorMap!).toEqual({'one': true});
}));
});
@ -380,84 +414,84 @@ import {first, map} from 'rxjs/operators';
function observableValidator(response: {[key: string]: any}): AsyncValidatorFn {
return (c: AbstractControl) => {
const res = c.value != 'expected' ? response : null;
return of (res);
return of(res);
};
}
it('should return null when given null',
() => { expect(Validators.composeAsync(null !)).toBeNull(); });
it('should return null when given null', () => {
expect(Validators.composeAsync(null!)).toBeNull();
});
it('should collect errors from all the validators', () => {
const v = Validators.composeAsync(
[observableValidator({'one': true}), observableValidator({'two': true})]) !;
[observableValidator({'one': true}), observableValidator({'two': true})])!;
let errorMap: {[key: string]: any}|null = undefined !;
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);
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
expect(errorMap !).toEqual({'one': true, 'two': true});
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}))]) !;
[normalizeAsyncValidator(new AsyncValidatorDirective('expected', {'one': true}))])!;
let errorMap: {[key: string]: any}|null = undefined !;
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) !;
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors)!;
expect(errorMap !).toEqual({'one': true});
expect(errorMap!).toEqual({'one': true});
});
it('should return null when no errors', () => {
const v = Validators.composeAsync([observableValidator({'one': true})]) !;
const v = Validators.composeAsync([observableValidator({'one': true})])!;
let errorMap: {[key: string]: any}|null = undefined !;
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);
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
expect(errorMap).toBeNull();
});
it('should ignore nulls', () => {
const v = Validators.composeAsync([observableValidator({'one': true}), null !]) !;
const v = Validators.composeAsync([observableValidator({'one': true}), null!])!;
let errorMap: {[key: string]: any}|null = undefined !;
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);
.subscribe((errors: {[key: string]: any}|null) => errorMap = errors);
expect(errorMap !).toEqual({'one': true});
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)); };
return (c: AbstractControl) => {
return timer(time).pipe(map(() => errorMap));
};
}
const v = Validators.composeAsync(
[getTimerObs(100, {one: true}), getTimerObs(200, {two: true})]) !;
[getTimerObs(100, {one: true}), getTimerObs(200, {two: true})])!;
let errorMap: {[key: string]: any}|null = undefined !;
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);
.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.`);
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;
}