form array angular 6

form array consept
   


 email: this.formBuilder.array([
        this.initEmailAddress()
      ]),


 /* ======================================== email Field   aaray ============================================================ */

  initEmailAddress() {
    return this.formBuilder.group({
      email_category_id: [''],
      email_address: ['', {
        validators: Validators.pattern(this.emailValidation),
        updateOn: 'change'
      }]
    });
  }

  addEmailField() {
    const control = <FormArray>this.contactForm.controls['email'];
    control.push(this.initEmailAddress());
  }
  removeEmailField(i: number) {
    const control = <FormArray>this.contactForm.controls['email'];
    control.removeAt(i);
  }

  /* ======================================== init phone Field   aaray ============================================================ */

        <!-- email starting -->
        <div class="field_wrapper email_wrapper" formArrayName="email">
          <div *ngFor="let address of contactForm['controls'].email['controls']; let i=index">
            <!-- {{address.value | json}} -->
            <div class="width_100" [formGroupName]="i">
              <div class="width_5 create_contact_form_icon">
                <i class="material-icons">email</i>
              </div>
              <mat-form-field class="width_60">
                <input (keypress)="preventFromToBeClosed($event)" autocomplete="off" matInput placeholder=" Email" formControlName="email_address">
                <mat-error *ngIf="address['controls'].email_address.invalid">{{getEmailErrorMessage()}}</mat-error>
              </mat-form-field>

              <mat-form-field class="width_25 contact_label_right">
                <input type="text" placeholder="Label" aria-label="Number" matInput formControlName="email_category_id" [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete">
                  <mat-option *ngFor="let option of email_categories" [value]="option">
                    {{ option }}
                  </mat-option>
                </mat-autocomplete>
              </mat-form-field>
              <div class="contact_form_remove_input_btn remove_btn" *ngIf="contactForm['controls'].email.controls.length > 1" (click)="removeEmailField(i)"
                matTooltip="Remove Email">
                <div>
                  <i class="material-icons">remove</i>
                </div>
              </div>
            </div>
          </div>
          <div class="contact_form_remove_add_btn" matTooltip="Add Email" (click)="addEmailField()">
            <i class="material-icons">add</i>
          </div>
        </div>