<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
We have an AbstractControl with basic validators like (required, maxLength) in a ReactiveForm via TypeScript FormBuilder. To those basic validators we added a custom validator which dynamically change the validation strategy based on a dropdown value. Currently we are using the <code class="notranslate">setValidators()</code> method inside another component (AbstractControl is included via <code class="notranslate">@Input()</code>). The main problem is that it overwrites existing validators.<br>
Example:</p>
<p dir="auto">App Component</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.formBuilder.group({
      zip: ['', [Validators.required, Validators.maxLength(10)]] 
    });"><pre class="notranslate"><code class="notranslate">this.formBuilder.group({
      zip: ['', [Validators.required, Validators.maxLength(10)]] 
    });
</code></pre></div>
<p dir="auto">App Template</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;zip ...
        [control]=&quot;form.controls.zip&quot;&gt;
&lt;/zip&gt;"><pre class="notranslate"><code class="notranslate">&lt;zip ...
        [control]="form.controls.zip"&gt;
&lt;/zip&gt;
</code></pre></div>
<p dir="auto">ZIP Component</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Input() control: AbstractControl;

this.control.setValidators([
      // redundant to formBuilder
      Validators.required,
      Validators.maxLength(10),
      // custom validation based on a dropdown value (via. valueChange Detection)
      validateZipFn(countryCode)]
    );"><pre class="notranslate"><code class="notranslate">@Input() control: AbstractControl;

this.control.setValidators([
      // redundant to formBuilder
      Validators.required,
      Validators.maxLength(10),
      // custom validation based on a dropdown value (via. valueChange Detection)
      validateZipFn(countryCode)]
    );
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
To stay flexible we don't want to overwrite all validators. The below code would illustrate the behavior with a <code class="notranslate">getValidators()</code> method.</p>
<p dir="auto">App Component</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.formBuilder.group({
      zip: ['', [Validators.required, Validators.maxLength(10)]]
    });"><pre class="notranslate"><code class="notranslate">this.formBuilder.group({
      zip: ['', [Validators.required, Validators.maxLength(10)]]
    });
</code></pre></div>
<p dir="auto">App Template</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;zip ...
        [control]=&quot;form.controls.zip&quot;&gt;
&lt;/zip&gt;"><pre class="notranslate"><code class="notranslate">&lt;zip ...
        [control]="form.controls.zip"&gt;
&lt;/zip&gt;
</code></pre></div>
<p dir="auto">ZIP Component</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Input() control: AbstractControl;

let listOfAllValidationRules = this.control.getValidators().push(validateZipFn(countryCode)]);
this.control.setValidators(listOfAllValidationRules);"><pre class="notranslate"><code class="notranslate">@Input() control: AbstractControl;

let listOfAllValidationRules = this.control.getValidators().push(validateZipFn(countryCode)]);
this.control.setValidators(listOfAllValidationRules);
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Being more flexible with dynamic validation.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> ~2.1.2</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript / ES6</p>
</li>
</ul>
<p dir="auto">I'm submitting a Bug Report.</p>
<h2 dir="auto">Current Behaviour</h2>
<p dir="auto">Running <code class="notranslate">ngc</code> generates a <code class="notranslate">View_AppComponent_0()</code> function that takes the logger as argument. If the component template does not declare any element or text that function is basically empty. The <code class="notranslate">l</code> parameter is not used, which can lead to errors when typescript builds it with <code class="notranslate">noUnusedParameters</code>.</p>
<h2 dir="auto">Expected Behaviour</h2>
<p dir="auto">The factory code should not take an argument, or should always use that argument so that typescript doesn't show an error.</p>