Как я могу использовать определенный FormControl из FromArray в моем HTML-документе?

Question

Я инициализирую свой FormArray этим кодом

this.contents.forEach(content=> {
       this.formArray.push( new FormControl(content.text, Validators.required));
    });

и хочу связать один FormControl с моим textarea и изменить его с моим идентификатором.

<textarea matInput id="content-textarea" placeholder="Required" [formControlName]="formArray.at(id)"></textarea>

Но я получаю это сообщение об ошибке:

ОШИБКА Ошибка: не удается найти элемент управления с неопределенным атрибутом имени

Как использовать определенныйFormControl из FormArray в моем HTML-документе?

EDIT : я не могу использовать FormControl, если у меня его нет.Я получил это сообщение об ошибке, потому что мой Content-Array был пуст, и я попытался использовать FormControl.Так что у меня другая проблема.Но спасибо за ваши ответы:)

Answer 1

Я сделал что-то вроде этого, не могу показать демо, это часть большого модуля:

<tr *ngFor="let file of docInfoForm.controls.Documents.controls; let i = index;" [formGroup]="file" class="form-group">
    <td>
      <fa class="cust-file-icon" [name]="file.get('Name').value | fileTypeIcon"></fa>
      <input [attr.id]="'file-type-' + i" type="hidden" class="form-control" formControlName="Type" placeholder="File Size">
    </td>
    <td class="left">
      <text-control [ctr-id]="'file-name-' + i" [label-text]="'File Name'" formControlName="Name"
        [error-text]="'File Name is required'" [mandatory]="true" [form-ctr]="file.controls.Name">
      </text-control>
    </td>
    <td class="left">
      <text-control [ctr-id]="'file-desc-' + i" [label-text]="'Description'" formControlName="Description"></text-control>
    </td>
    <td class="left">
      <label for="{{'file-size-' + i}}" class="form-label">
        <span class="file-size-label">Size</span>
        <span class="file-size-value">{{ file.get('Size').value | fileSize: true }}</span>
        <input [attr.id]="'file-size-' + i" type="hidden" class="form-control" formControlName="Size" placeholder="File Size">
      </label>
    </td>
    <td>
      <button class="btn btn-outline only-icon btn-round" (click)="removeFile(i)">
        <clr-icon shape="times"></clr-icon>
      </button>
    </td>
  </tr>

Answer 2

Что делать, если вы напрямую используете formcontrol вместо formcontrolname

 <textarea matInput id="content-textarea" placeholder="Required" [formControl]="formArray.controls[0]"></textarea>

демо