title: Angular/Reactive Forms - Add or Delete an list of FormControl - Binding template (With demo)
body: <p>I have a <code>matSelect</code> since I can select a number from 1 to 10, depending on the number I have to display the same number of<code>matInput</code> with a *ngFor. The number selected by default in the select is 1 (so we have a one <code>matInput</code> by default too)</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-select placeholder="Number of winners to reward" [value]="selected" (selectionChange)="selectNumber($event)"&gt;
      &lt;mat-option *ngFor="let emailNumber of totalEmailsNumber" [value]="emailNumber"&gt;
        {{ emailNumber }}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  
  &lt;div formArrayName="mails"&gt;
    &lt;mat-form-field *ngFor="let email of form.get('mails').controls; let i = index"&gt;
      &lt;textarea matInput [formControlName]="i"&gt;&lt;/textarea&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>to add the default FormControl of the first <code>MatInput</code> I do:</p>
  
  <pre><code>this.form.controls['mails'] = this.fb.array(this.emailsNumber.map(() =&gt; new FormControl('', Validators.required)));
  </code></pre>
  
  <p>Which works, but I can not manage the logic to add another <code>FormControl</code> or to delete it if for example the user chose 10 in the select then changed it to 4,
  and manage the binding in the template.</p>
  
  <p>Im also wondering is <code>*ngFor="let email of form.get('mails').controls</code> is a good practice?</p>
  
  <hr>
  
  <blockquote>
    <p>Here's a <a href="https://stackblitz.com/edit/angular-yn4xfa" rel="nofollow noreferrer"><strong>Minimal StackBlitz Demo</strong></a> to work with</p>
  </blockquote>