Angular2具有嵌套json的ngModelGroup的编辑表单
我有以下组件和模板:Angular2具有嵌套json的ngModelGroup的编辑表单,angular,typescript,Angular,Typescript,我有以下组件和模板: import { Component } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { JobsService } from '../jobs.service'; import { Validators, FormGroup, FormArray, FormBuilder, FormControl, NgForm } from '@angula
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { JobsService } from '../jobs.service';
import { Validators, FormGroup, FormArray, FormBuilder, FormControl, NgForm } from '@angular/forms';
@Component({
selector: 'job-edit',
templateUrl: './job-edit.template.html',
providers: [JobsService],
})
export class JobEditComponent {
job: any = {};
errorMessage: string;
paramsObserver: any;
public myForm: FormGroup;
constructor(private _router: Router, private _route: ActivatedRoute, private _jobService: JobsService) {}
ngOnInit() {
this.paramsObserver = this._route.params.subscribe(params => {
let jobId = params['jobId'];
this._jobService
.read(jobId)
.subscribe(
job => {
this.job = job;
},
error => this._router.navigate(['/jobs'])
);
});
}
ngOnDestroy() {
this.paramsObserver.unsubscribe();
}
update() {
this._jobService.update(this.job).subscribe(savedJob => this._router.navigate(['/jobs', savedJob._id]), error => this.errorMessage = error);
}
}
下面是模板文件:
<div class="container">
<form #myForm="ngForm" (ngSubmit)="update()" novalidate>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Duration</label>
<div class="form-inline">
<fieldset ngModelGroup="_duration" #nameCtrl="ngModelGroup">
<input type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" ngModel>
<input type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" ngControl ngModel>
</fieldset>
</div>
</div>
</div>
</div>
</form>
</div>
我的问题是如何绑定数据?
现在,当我单击列表的“编辑”链接时,它会显示表单,但未设置以前的数据
注意:我以前也是这样:
<fieldset ngModelGroup="_duration" #nameCtrl="ngModelGroup">
<input type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" [(ngModel)]="job._duration.years">
<input type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" [(ngModel)]="job._duration.months">
</fieldset>
<div class="form-group">
<label>Duration</label>
<div class="form-inline">
<fieldset ngModelGroup="_duration">
<input *ngIf="job._duration" type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" [(ngModel)]="job._duration.years">
<input *ngIf="job._duration" type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" [(ngModel)]="job._duration.months">
</fieldset>
</div>
</div>
只需检查
*ngIf
如下:
<fieldset ngModelGroup="_duration" #nameCtrl="ngModelGroup">
<input type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" [(ngModel)]="job._duration.years">
<input type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" [(ngModel)]="job._duration.months">
</fieldset>
<div class="form-group">
<label>Duration</label>
<div class="form-inline">
<fieldset ngModelGroup="_duration">
<input *ngIf="job._duration" type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" [(ngModel)]="job._duration.years">
<input *ngIf="job._duration" type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" [(ngModel)]="job._duration.months">
</fieldset>
</div>
</div>
期间