I have a dynamically created list of file names that I need to associate one to n descriptions. I have created a description formGroup
that I can add another input on user click. However, whenever I click the icon, it adds another box to ALL of the filename blocks. I believe I need a unique instance of my description formGroup
for each of my file names to get the behavior I desire. That behavior is one where when the user clicks the icon associated with a certain filename, the additional block only appears within the row for that filename. My question is this, how do I create unique instances of my description formGroup
? Any alternatives would be helpful as well. Thank you in advance!
The HTML:
<div *ngIf="showDetailsPane">
<h4 class="issueHeader" style="margin-top: 60px;">Article Details</h4>
<div class="artDetail-pane" id="article-detail">
<div class="row" style="margin-left: 50px; margin-right: 50px;">
<div class="col-4 buttonGradient" style="text-align: center">
File Name
</div>
<div class="col-8 buttonGradient" style="text-align: center">
Description
</div>
</div>
<div class="scrollDiv">
<div class="row row-striped" *ngFor="let article of articlesFiles;index as i" style="margin-right: 0px; margin-left: 0px; width: 100%;">
<div class="col-4 fileText">{{ article }}</div>
<div class="col-8">
<i class="fa fa-trash" aria-hidden="true" style="float: right;color: #87c232;padding-top: 6px;"></i>
<i class="fa fa-plus-square-o" aria-hidden="true" style="float: right;color: #87c232;padding-top: 6px;margin-right: 45px;"
(click)="addDescription()"></i>
<div [formGroup]="descriptionForm">
<div formArrayName="description">
<div *ngFor="let desc of descriptionForm.controls.description.controls; index as j">
<div [formGroupName]="j">
<input class="fileInput" id="article{{i}}_{{j}}" formControlName="description" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-s buttonGradient sectionBtn" (click)="showSectionDetailsPane = !showSectionDetailsPane">Next</button>
<button type="button" class="btn btn-success btn-s buttonGradient sectionBtn" style="margin-right: 6px;" disabled>Edit</button>
</div>
</div>
The TS:
descriptionForm: FormGroup;
initDescription() {
return this.fb.group({
description: ['', Validators.required]
});
}
addDescription() {
const control = <FormArray>this.descriptionForm.controls['description'];
control.push(this.initDescription());
}
ngOnInit() {
this.descriptionForm = this.fb.group({
description: this.fb.array([
this.initDescription(),
])
});
}