我有一个带有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>
<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>
<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
任何帮助表示赞赏。