Как добавить динамические c типы полей в Angular FormArray?

Question

Я пытаюсь создать форму типа редактора блоков в Angular. Я хочу, чтобы эта форма была просто одним массивом динамических c полей. Пока у меня есть следующий код, но кнопка для добавления различных полей всегда добавляет все поля вместо того, который должен. Как добавить в массив только указанное поле c? Каков наилучший подход для разработки такой формы?

Форма TS

storyForm = this.story.group({
    blocks: this.story.array([]),
});

get blocks() {
    return this.storyForm.get('blocks') as FormArray;
}

Кнопки для добавления различных полей в массив выше

addHeading() {
    this.blocks.push(this.story.group({
      heading: [''],
    }));
}  

addParagraph() {
    this.blocks.push(this.story.group({
      paragraph: [''],
    }));
}

HTML Шаблон

<div class="form-group" formArrayName="blocks">
    <div *ngFor="let piece of blocks.controls; let i=index">
        <textarea class="form-control" rows="8" placeholder="heading" formControlName="heading" ></textarea>
        <textarea class="form-control" rows="8" placeholder="paragraph" formControlName="paragraph" ></textarea>
    </div>
</div>
<button type="button" class="btn btn-secondary" (click)="addParagraph()">Add Paragraph</button>
<button type="button" class="btn btn-secondary" (click)="addHeading()">Add Heading</button>