Question

我有下面的组件和模板：

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>

我有_duration的数据，其结构如下：

_duration {
  years: string,
  months: string
}

我的问题是我应该如何绑定数据？现在，当我单击列表的编辑链接时，它会显示表单，但之前的数据未设置。

注意：我也这样使用：

<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>

Answer 1

只需查看*ngIf，就像这样：

                <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>

Angular2编辑表单，其中包含嵌套json的ngModelGroup

1 个答案: