угловой 4-х вложенный счетчик сброса массива formGroup для подсчета внутренних групп - PullRequest
Новая
       8

угловой 4-х вложенный счетчик сброса массива formGroup для подсчета внутренних групп

0 голосов
/ 04 мая 2018

У меня есть сегмент (id, время), в котором может быть один или несколько человек (роль, информация). Поле генерируется динамически. После создания нескольких человек для каждого сегмента я заметил, что индекс для людей не перезапускается с каждым созданным сегментом. Когда я иду, чтобы удалить человека, выбранный человек не является удаленным (удаленным).
Итак, у меня есть: 

segment 1   
-----person 1  (index = 0)    
--segment 2   
-----person 1  (index = 1)     
-----person 2  (index = 2)  
-----person 3  (index = 3)       
--segment 3   
-----person 1  (index = 4)     
-----person 2  (index = 5)

Как я могу сбросить счетчик для человека, чтобы я мог удалить выбранного человека. Как я могу иметь правильный индекс, как:
сегмент 1 

-----person 1  (index = 0)    
--segment 2   
-----person 1  (index = 0)     
-----person 2  (index = 1)  
-----person 3  (index = 2)       
--segment 3   
-----person 1  (index = 1)     
-----person 2  (index = 2)

Вот мой .html код 

<div formArrayName="segmentRows3">
          <div *ngFor=" let segmentRow of mySummaryForm.controls.segmentRows3.controls; let i=index " > 
            <div  class="form-group" [formGroupName]="i" >  
                <label for="segmentId3">Segment ID
                    <input type="text" formControlName="segmentId3" id="segmentId3" class="form-control" value="{{i+1}}" [attr.disabled]="true" required >          
                </label>   <br> 
                <label for="segmentTime3">Segment time : </label> {{mySummaryForm.value.segmentTime3 | json}}<br>
                <p-calendar formControlName="segmentTime3" showTime="true" hourFormat="24" [utc]="false" timeOnly="true" type="text" id="segmentTime3" placeholder="select a time" (ngModelChange)="onChange($event)" (onSelect)="onSelect($event)" required></p-calendar>         

                <label><span *ngIf="mySummaryForm.controls.segmentRows3.controls.length > 1" (click)="deleteSegment(i)" class="btn btn-danger">Remove segment</span></label>                    
                <button type="button" (click)="addPerson(i)" class="btn btn-info">Add a person</button>
                <div formArrayName="personRows3">
                    <div *ngFor=" let personRow of segmentRow.controls.personRows3.controls; let j=index " >
                        <div  class="form-group" [formGroupName]="j" >   #{{j+1}}   
                                <label for="personR3">person Role 
                                <input formControlName="personR3" [typeahead]="personRole" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personR3" class="form-control" placeholder="select a role" (ngModelChange)="onChange($event)" required>
                                </label>
                                <label for="personI3">Person infos
                                <input formControlName="personI3" [typeahead]="states" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personI3" class="form-control" placeholder="select infos" (ngModelChange)="onChange($event)" required>
                                </label>                                    
                                <label><span *ngIf="segmentRow.controls.personRows3.controls.length > 1" (click)="deletePerson(i, j)" class="btn btn-warning">Remove</span></label>
                        </div>                  
                    </div>
                </div>
                <label for="topic">Topic</label>
                <textarea formControlName="topic" id="topic" class="form-control" (ngModelChange)="onChange($event)" required></textarea>  
            </div>            
          </div>
        </div>
        <button type="button" (click)="addSegment(i)" class="btn btn-primary">Add a segment</button>

Вот мой .ts код 

addPerson(index: number) {
    let personRows3 = <FormArray>this.mySummaryForm.get(`segmentRows3.${index}.personRows3`)
    if(personRows3){
        personRows3.push(this.fb.group({
            personR3: '',
            personI3: ''
        }));
     }
}

deletePerson(indexSeg: number, indexPers: number) {    
    let personRows3 = <FormArray>this.mySummaryForm.get(`segmentRows3.${index}.personRows3`); 
    if(personRows3){
        personRows3.removeAt(indexPers);
    }
}

addSegment(index: number) {
    let segmentRows3 = <FormArray>this.mySummaryForm.get('segmentRows3');
    if(segmentRows3){
        segmentRows3.push(
            this.fb.group({
                segmentTime3: '',
                segmentId3: '',
                topic: '',              
                personRows3: this.fb.array([
                this.fb.group({
                   personR3: '',
                   personI3: ''
                  })
                ])
            })
        );
    }
}

1 Ответ

0 голосов
/ 04 мая 2018

Я думаю, вы можете использовать настроенные атрибуты индекса данных для достижения. Это объясняется более четко с примером в ответе, упомянутом в ссылке.

пример индекса данных

...