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

Closes #11479

modules/@angular/forms/src/directives/shared.ts

@@ -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)
+    if ((<Validator>validator).registerOnValidatorChange)
-      (<Validator>validator).registerOnChange(() => control.updateValueAndValidity());
+      (<Validator>validator).registerOnValidatorChange(() => control.updateValueAndValidity());
   });
 
   dir._rawAsyncValidators.forEach((validator: Validator | ValidatorFn) => {
-    if ((<Validator>validator).registerOnChange)
+    if ((<Validator>validator).registerOnValidatorChange)
-      (<Validator>validator).registerOnChange(() => 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._rawValidators.forEach((validator: Validator) => validator.registerOnChange(null));
+  dir._rawValidators.forEach((validator: Validator) => validator.registerOnValidatorChange(null));
-  dir._rawAsyncValidators.forEach((validator: Validator) => validator.registerOnChange(null));
+  dir._rawAsyncValidators.forEach(
+      (validator: Validator) => validator.registerOnValidatorChange(null));
   if (control) control._clearChangeFns();
 }
 

modules/@angular/forms/src/directives/validators.ts

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

modules/@angular/forms/test/reactive_integration_spec.ts

@@ -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: ''})

tools/public_api_guard/forms/index.d.ts

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