Создайте уникальный экземпляр formGroup для каждого элемента в динамически создаваемом списке в Angular 6 - PullRequest
Новая
       12

Создайте уникальный экземпляр formGroup для каждого элемента в динамически создаваемом списке в Angular 6

0 голосов
/ 28 августа 2018

У меня есть динамически создаваемый список имен файлов, которые мне нужно связать от одного до n описаний. Я создал описание formGroup, которое я могу добавить еще одним вводом по клику пользователя. Однако всякий раз, когда я нажимаю на значок, он добавляет еще одно поле ко ВСЕМ блокам имени файла. Я считаю, что мне нужен уникальный экземпляр моего описания formGroup для каждого из имен файлов, чтобы получить желаемое поведение. Это такое поведение, когда пользователь нажимает значок, связанный с определенным именем файла, дополнительный блок появляется только в строке для этого имени файла. У меня вопрос такой, как мне создать уникальные экземпляры моего описания formGroup? Любые альтернативы также будут полезны. Заранее спасибо!

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>

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(),
      ])
    });
}
...