Angular 角嵌套窗体组
我很难用数据更新我的表格。我在另一个formGroup中有一个嵌套的formGroup,并且我得到的数据没有更新表单,它仍然是空的。我可以在日志中看到数据,因此表单更新有问题 以下是我的组件:Angular 角嵌套窗体组,angular,angular-formbuilder,Angular,Angular Formbuilder,我很难用数据更新我的表格。我在另一个formGroup中有一个嵌套的formGroup,并且我得到的数据没有更新表单,它仍然是空的。我可以在日志中看到数据,因此表单更新有问题 以下是我的组件: this.editForm = this.formBuilder.group({ id: [], date: ['', Validators.required], checkboxValue: this.formBuilder.group({ clos
this.editForm = this.formBuilder.group({
id: [],
date: ['', Validators.required],
checkboxValue: this.formBuilder.group({
closed: [],
openFrom: [''],
openTo: [''],
})
});
console.log(this.editForm.value);
this.httpClientService.getIrregularDaysById(+irregDayId)
.subscribe(data => {
this.irregDay = data;
this.irregDay.openFrom = this.formatTime(this.irregDay.openFrom);
this.irregDay.openTo = this.formatTime(this.irregDay.openTo);
// this.irregDay.date = this.formatDate(this.irregDay.date);
this.irregDay.closed = this.formatClosed(this.irregDay.closed);
this.editForm.patchValue(data);
console.log('getIrregularDaysById: ', data);
console.log(data.date);
});
和我的HTML:
<div class="col-md-6">
<h2 class="text-center">Edit irregular day</h2>
<form [formGroup]="editForm" (ngSubmit)="onSubmit()">
<div class="material-input">
<mat-form-field class="form-group" appearance="outline">
<input matInput readonly [matDatepicker]="picker" placeholder="Please pick a date" formControlName="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
<mat-error *ngIf="editForm.get('date').errors && (editForm.get('date').touched)">
Date is required
</mat-error>
</mat-form-field>
</div>
<div formGroupName="checkboxValue">
<div class="form-group">
<mat-checkbox formControlName="closed" class="form-control" color="primary" [(ngModel)]="disabled">
Closed</mat-checkbox>
</div>
<div class="material-input">
<mat-form-field class="form-group" appearance="outline">
<mat-label>Open from</mat-label>
<div class="timepicker">
<input matInput readonly [disableClick]="true" placeholder="Open from" formControlName="openFrom"
[ngxTimepicker]="startTimePicker" [format]="24" [disabled]="disabled">
<ngx-material-timepicker #startTimePicker></ngx-material-timepicker>
<ngx-material-timepicker-toggle [for]="startTimePicker"></ngx-material-timepicker-toggle>
</div>
<mat-error *ngIf="editForm.get('openFrom')?.errors && (editForm.get('openFrom').touched)">
This field is required
</mat-error>
</mat-form-field>
</div>
<div class="material-input">
<mat-form-field class="form-group" appearance="outline">
<mat-label>Open to</mat-label>
<div class="timepicker">
<input matInput readonly [disableClick]="true" placeholder="Open to" formControlName="openTo"
[ngxTimepicker]="startTimePicker2" [format]="24" [disabled]="disabled">
<ngx-material-timepicker #startTimePicker2></ngx-material-timepicker>
<ngx-material-timepicker-toggle [for]="startTimePicker2"></ngx-material-timepicker-toggle>
</div>
<mat-error *ngIf="editForm.get('openTo')?.errors && (editForm.get('openTo').touched)">
This field is required
</mat-error>
</mat-form-field>
</div>
</div>
<button mat-raised-button color="primary" type="button" class="btn btn-success" [disabled]="!editForm.valid"
(click)="onSubmit()" routerLink="/irregulardays">Update</button>
</form>
</div>
你是这样设置的
this.editForm.patchValue({
id: ........,
date: ......
})
formGroup patchvalue方法必须使用键和值对指定参数
formgroup.patchValue({name:’Mocrosoft’});
就你而言
this.editForm.patchValue(
{
id: data.id,
date: data.date, {
checkboxValue: {
openFrom: true
}}});
我在谷歌上找到了一个最好的例子。
如果要更新FormGroup,可以使用patchValue方法。此方法接受与FormGroup控件名称相同的键作为参数对象
例如:
this.editForm.patchValue({
id: data.id,
date: data.date
checkboxValue: {...data.checkboxValue}
}
因此,如果checkboxValue也是FormGroup,则可以将此控件更新为:
this.editForm.get('checkboxValue').patchValue({...data.checkboxValue});
你的解决方案。我不知道订阅中的数据获取接口,但我认为它可能是正确的:
this.httpClientService.getIrregularDaysById(+irregDayId).subscribe(data => {
this.irregDay = {...data};
this.irregDay.openFrom = this.formatTime(data.openFrom);
this.irregDay.openTo = this.formatTime(data.openTo);
this.irregDay.date = this.formatDate(data.date);
this.irregDay.closed = this.formatClosed(data.closed);
this.editForm.patchValue({
id: data.id,
date: data.date or this.irregDay.date if you need formatted data
checkboxValue: {
closed: data.closed or this.irregDay.closed if you need formatted data
openFrom: data.openFrom or this.irregDay.openFrom if you need formatted data
openTo: data.openTo or this.irregDay.openTo if you need formatted data
}
});
});
什么意思?数据对象的形状是什么?它和你的表单对象一样吗?@Kerk这有帮助吗?