Почему значение не отображается в сгенерированных элементах массива формы?

Question

Я использую angular12 в своем проекте. Я пытаюсь использовать массив форм в своем проекте.

Вот как я его использую:

Шаблон:

            <div class="col-lg-12 col-md-12" *ngFor="let control of supportEmail.controls; index as i">
        <label class="col-sm-2 col-form-label" for="supportEmail">Support Email</label>
        <div class="input-group">

          <input type="email" class="form-control" id="supportEmail" formControlName="supportEmail"
            [ngClass]="{ 'is-invalid': isInvalid('supportEmail'), 'is-valid': isValid('supportEmail') }">

          <div class="input-group-append">
            <button class="btn btn-primary" type="button" (click)="removeSupport(i)"><i
                class="fas fa-times"></i></button>
          </div>
        </div>
      </div>
      

Машинопись:

      supportEmail = new FormArray([]);

addSupport() {
  this.supportEmail.push(new FormControl(''));
}

removeSupport(index: number) {
  this.supportEmail.removeAt(index);
}



ngOnInit() {
  this.supportEmail.push(new FormControl('[e-mail]'))
  this.supportEmail.push(new FormControl('[e-mail]'))
  this.supportEmail.push(new FormControl('[e-mail]'))
}

Когда страница загружается, я получаю 3 пустых ввода без текста внутри. Пока я ожидал получить в каждой форме ввода текст:
[e-mail] [e-mail] [e-mail]

Любая идея, почему входы пусты? Почему не отображается текст?