fix(forms): rename validator change fn due to conflict (#11492)

Closes #11479
This commit is contained in:
Kara 2016-09-09 14:09:11 -07:00 committed by Evan Martin
parent 0bce3907b8
commit 53f0c2206d
4 changed files with 33 additions and 23 deletions

View File

@ -67,21 +67,22 @@ export function setUpControl(control: FormControl, dir: NgControl): void {
// re-run validation when validator binding changes, e.g. minlength=3 -> minlength=4
dir._rawValidators.forEach((validator: Validator | ValidatorFn) => {
if ((<Validator>validator).registerOnChange)
(<Validator>validator).registerOnChange(() => control.updateValueAndValidity());
if ((<Validator>validator).registerOnValidatorChange)
(<Validator>validator).registerOnValidatorChange(() => control.updateValueAndValidity());
});
dir._rawAsyncValidators.forEach((validator: Validator | ValidatorFn) => {
if ((<Validator>validator).registerOnChange)
(<Validator>validator).registerOnChange(() => control.updateValueAndValidity());
if ((<Validator>validator).registerOnValidatorChange)
(<Validator>validator).registerOnValidatorChange(() => control.updateValueAndValidity());
});
}
export function cleanUpControl(control: FormControl, dir: NgControl) {
dir.valueAccessor.registerOnChange(() => _noControlError(dir));
dir.valueAccessor.registerOnTouched(() => _noControlError(dir));
dir._rawValidators.forEach((validator: Validator) => validator.registerOnChange(null));
dir._rawAsyncValidators.forEach((validator: Validator) => validator.registerOnChange(null));
dir._rawValidators.forEach((validator: Validator) => validator.registerOnValidatorChange(null));
dir._rawAsyncValidators.forEach(
(validator: Validator) => validator.registerOnValidatorChange(null));
if (control) control._clearChangeFns();
}

View File

@ -35,7 +35,7 @@ import {NG_VALIDATORS, Validators} from '../validators';
*/
export interface Validator {
validate(c: AbstractControl): {[key: string]: any};
registerOnChange?(fn: () => void): void;
registerOnValidatorChange?(fn: () => void): void;
}
export const REQUIRED_VALIDATOR: any = {
@ -77,7 +77,7 @@ export class RequiredValidator implements Validator {
return this.required ? Validators.required(c) : null;
}
registerOnChange(fn: () => void) { this._onChange = fn; }
registerOnValidatorChange(fn: () => void) { this._onChange = fn; }
}
/**
@ -138,7 +138,7 @@ export class MinLengthValidator implements Validator,
return isPresent(this.minlength) ? this._validator(c) : null;
}
registerOnChange(fn: () => void) { this._onChange = fn; }
registerOnValidatorChange(fn: () => void) { this._onChange = fn; }
}
/**
@ -188,7 +188,7 @@ export class MaxLengthValidator implements Validator,
return isPresent(this.maxlength) ? this._validator(c) : null;
}
registerOnChange(fn: () => void) { this._onChange = fn; }
registerOnValidatorChange(fn: () => void) { this._onChange = fn; }
}
@ -237,5 +237,5 @@ export class PatternValidator implements Validator,
return isPresent(this.pattern) ? this._validator(c) : null;
}
registerOnChange(fn: () => void) { this._onChange = fn; }
registerOnValidatorChange(fn: () => void) { this._onChange = fn; }
}

View File

@ -8,13 +8,12 @@
import {Component, Directive, EventEmitter, Input, Output, forwardRef} from '@angular/core';
import {TestBed, fakeAsync, tick} from '@angular/core/testing';
import {ControlValueAccessor, FormArray, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, ReactiveFormsModule, Validator, Validators} from '@angular/forms';
import {AbstractControl, ControlValueAccessor, FormArray, FormControl, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule, Validator, Validators} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {dispatchEvent} from '@angular/platform-browser/testing/browser_util';
import {ListWrapper} from '../src/facade/collection';
import {AbstractControl} from '../src/model';
export function main() {
describe('reactive forms integration tests', () => {
@ -981,7 +980,8 @@ export function main() {
describe('custom value accessors', () => {
it('should support custom value accessors', () => {
const fixture = TestBed.createComponent(WrappedValueForm);
fixture.componentInstance.form = new FormGroup({'login': new FormControl('aa')});
const form = new FormGroup({'login': new FormControl('aa')});
fixture.componentInstance.form = form;
fixture.detectChanges();
// model -> view
@ -992,7 +992,12 @@ export function main() {
dispatchEvent(input.nativeElement, 'input');
// view -> model
expect(fixture.componentInstance.form.value).toEqual({'login': 'bb'});
expect(form.value).toEqual({'login': 'bb'});
// custom validator
expect(form.get('login').errors).toEqual({'err': true});
form.setValue({login: 'expected'});
expect(form.get('login').errors).toEqual(null);
});
it('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property',
@ -1549,20 +1554,24 @@ export function main() {
@Directive({
selector: '[wrapped-value]',
host: {'(input)': 'handleOnInput($event.target.value)', '[value]': 'value'}
host: {'(input)': 'handleOnInput($event.target.value)', '[value]': 'value'},
providers: [
{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: WrappedValue},
{provide: NG_VALIDATORS, multi: true, useExisting: WrappedValue}
]
})
class WrappedValue implements ControlValueAccessor {
value: any;
onChange: Function;
constructor(cd: NgControl) { cd.valueAccessor = this; }
writeValue(value: any) { this.value = `!${value}!`; }
registerOnChange(fn: (value: any) => void) { this.onChange = fn; }
registerOnTouched(fn: any) {}
handleOnInput(value: any) { this.onChange(value.substring(1, value.length - 1)); }
validate(c: AbstractControl) { return c.value === 'expected' ? null : {'err': true}; }
}
@Component({selector: 'my-input', template: ''})

View File

@ -321,7 +321,7 @@ export declare class FormsModule {
export declare class MaxLengthValidator implements Validator, OnChanges {
maxlength: string;
ngOnChanges(changes: SimpleChanges): void;
registerOnChange(fn: () => void): void;
registerOnValidatorChange(fn: () => void): void;
validate(c: AbstractControl): {
[key: string]: any;
};
@ -331,7 +331,7 @@ export declare class MaxLengthValidator implements Validator, OnChanges {
export declare class MinLengthValidator implements Validator, OnChanges {
minlength: string;
ngOnChanges(changes: SimpleChanges): void;
registerOnChange(fn: () => void): void;
registerOnValidatorChange(fn: () => void): void;
validate(c: AbstractControl): {
[key: string]: any;
};
@ -433,7 +433,7 @@ export declare class NgSelectOption implements OnDestroy {
export declare class PatternValidator implements Validator, OnChanges {
pattern: string;
ngOnChanges(changes: SimpleChanges): void;
registerOnChange(fn: () => void): void;
registerOnValidatorChange(fn: () => void): void;
validate(c: AbstractControl): {
[key: string]: any;
};
@ -446,7 +446,7 @@ export declare class ReactiveFormsModule {
/** @stable */
export declare class RequiredValidator implements Validator {
required: boolean;
registerOnChange(fn: () => void): void;
registerOnValidatorChange(fn: () => void): void;
validate(c: AbstractControl): {
[key: string]: any;
};
@ -478,7 +478,7 @@ export declare class SelectMultipleControlValueAccessor implements ControlValueA
/** @stable */
export interface Validator {
registerOnChange?(fn: () => void): void;
registerOnValidatorChange?(fn: () => void): void;
validate(c: AbstractControl): {
[key: string]: any;
};