Угловая 4-х вложенная реактивная форма, вручную устанавливающая значение скрытого ввода - PullRequest
0 голосов
/ 28 июня 2018

У меня есть реактивная вложенная форма с массивами формгрупп и форм. Я добавил скрытый ввод и хотел вручную обновить значение.
Вот это .ts:

buildForm() {           // build our form
    this.mySummaryForm = this.fb.group({
      date: ['',  Validators.required ],
      start_time: ['', Validators.required ],
      end_time: ['', Validators.required ],
      channel: ['', Validators.required ],
      channelOther: [''],
      show: ['', Validators.required ],
      showOther: [''],
      summary_detail: '',
      segmentRows3: this.fb.array([
        this.fb.group({
            segmentTime3: ['', Validators.required ],
            end_segmentTime3: ['', Validators.required ],
            segmentId3: [''],
            topic: '',  
            notes: '',
            personRows3: this.fb.array([
            this.fb.group({
                pers_id: [''],  //NEED TO SET THE VALUE MANUALLY IN .ts file
                personR3: ['', Validators.required ],
                personI3: ['', Validators.required ],
                personOther: [''],
              })
            ])
        })
      ]),
    });
}

Вот .html:

<div class="container">
            <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>  
                    <label><span *ngIf="mySummaryForm.controls.segmentRows3.controls.length > 1" (click)="deleteSegment(i)" class="btn btn-danger">Remove segment</span></label>
                      <br><br> 
                    <label for="segmentTime3">Segment time 
                        <input formControlName="segmentTime3" type="text" id="segmentTime3" class="form-control" placeholder="Enter a segment start time" 
                        (ngModel)="segmentTime3" (ngModelChange)="onChangeSeg($event, 'segmentTime3', i)" #segmentTime3 (focusout)="onCompSegStart()" required>                                                             
                    </label>
                    <span *ngIf="wrong_start_seg_time" class="alert alert-danger"><br>the segment start time is wrong !</span>                   
                          <br><br><br>
                    <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">Segment type 
                                    <input formControlName="personR3" [typeahead]="personRole" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" 
                                            id="personR3" class="form-control" placeholder="Select a type" (ngModelChange)="onChange($event)" #personR3 required>
                                </label> &nbsp;&nbsp;&nbsp;&nbsp; 
                                <label for="personI3">Person name 
                                    <input formControlName="personI3" [typeahead]="allPeopleInfos" typeaheadOptionField="full_infos" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" 
                                    type="text" id="personI3" class="form-control" placeholder="Enter infos" (ngModelChange)="onChangePers($event, 'personI3', i, j)"  
                                           (typeaheadOnSelect)="onselectedPers($event, 'personI3', i, j)" #personI3 required>   
                                    <input type="hidden" formControlName="pers_id" #pers_id (ngModel)="pers_id" name="pers_id" />
                                </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <label><div *ngIf="pers_other"><input formControlName="personOther" type="text" id="personOther" class="form-control" placeholder="New person infos" 
                                        (ngModelChange)="onChangePersO($event, 'personOther', i, j)"  #personOther></div></label>                                   
                                <label><span *ngIf="segmentRow.controls.personRows3.controls.length > 1" (click)="deletePerson(i,j)" class="btn btn-warning">Remove</span></label>
                            </div>                  
                        </div>   

Я не получаю ошибку, но значение не установлено.
вот что я попробовал:
let personRows3 = this.mySummaryForm.get (segmentRows3.${seg_index}.personRows3.${pers_index}) personRows3.pers_id: x.id
Любая помощь приветствуется.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...