1

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(),
      ])
    });
}
Brian Hood
  • 11
  • 4
  • This may possibly point you in the right direction and also includes the method to remove components at a later date if needed: https://stackoverflow.com/questions/44939878/dynamically-adding-and-removing-components-in-angular – Deacon Wolfwood Aug 28 '18 at 17:47

0 Answers0