fix(forms): rename validator change fn due to conflict (#11492)
Closes #11479
This commit is contained in:
parent
0bce3907b8
commit
53f0c2206d
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
@ -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; }
|
||||
}
|
||||
|
|
|
@ -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: ''})
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue