Repository: angular
Issue: Angular - Form Validation (duplicate trigger function custom validate)
Labels: type: bug/fix,area: forms,state: confirmed,P4

<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->
I am testing to make form-validation custom and i found something unreasonable, when the first init component new FormGroup, i pass the function name like customValidator to custom validate and i console.log to test it action, and i see new FormGroup is call three time action like this:

the command console.log is console.log('customValidator', control);

customValidator FormControl {validator: ƒ, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, …}
hero-form-reactive.component.ts:31 customValidator FormControl {validator: ƒ, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, …}
hero-form-reactive.component.ts:31 customValidator FormControl {validator: ƒ, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, …}

## Expected behavior
<!-- Describe what the desired behavior would be. -->
Because it call three time lead to when you call api to async it will duplicate request, i can't fix temporary with debounce lodash, but i think it shound be call one time when init

```javascript

  ngOnInit(): void {
    this.heroForm = new FormGroup({
      'name': new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        this.customValidator.bind(this), // <----- Custom validator method call
      ]),
      'alterEgo': new FormControl(this.hero.alterEgo),
      'power': new FormControl(this.hero.power, Validators.required)
    });
  }
  
  customValidator(control: FormControl) {
    console.log('customValidator', control);
  }
```

[Link to Repro](https://plnkr.co/edit/HOOnul9tqUagPB1P4E0l?p=preview)
with file name app/reactive/hero-form-reactive.component.ts

When you open Developer Tools you will see it call three time actions in custom function validate.

## Minimal reproduction of the problem with instructions
<!--
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->

## What is the motivation / use case for changing the behavior?
<!-- Describe the motivation or the concrete use case. -->


## Environment

<pre><code>
Angular version: 5.1.0
<!-- Check whether this is still an issue in the most recent Angular version -->

Browser:
- [x] Chrome (desktop) version  63.0.3239.132 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v8.9.3
- Platform:  Mac

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>