Angular 4嵌套反应形式手动设置隐藏输入的值

时间:2018-06-28 20:47:47

标签: angular angular-reactive-forms formarray formgroups

我有一个带有formgroup和form数组的反应式嵌套表单。我添加了一个隐藏的输入,并想手动更新该值。
这是.ts:

main

这是.html:

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: [''],
              })
            ])
        })
      ]),
    });
}

我没有收到错误,但未设置值。
这就是我尝试过的:
让personRows3 = this.mySummaryForm.get(<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> )             personRows3.pers_id:x.id
任何帮助表示赞赏。

0 个答案:

没有答案