Question

我有一个父组件，在里面我有一个子组件，当我点击编辑时，它会正确显示编辑表单，并显示子组件的先前数据（选择下拉列表），但现在如果我不想选择该下拉列表的另一个选项（子组件）并提交表单以更新数据，表单已提交，但该下拉列表已发布为空。但是，如果单击下拉列表并选择另一个选项或前一个选项，则提交正常。

parent.component.ts：

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';
import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'job-edit',
  templateUrl: './parent.template.html',
  providers: [JobsService],
})

export class JobEditComponent {
  job: any = {};
  errorMessage: string;
  paramsObserver: any;
  public myForm: FormGroup;
  expireDate;
  publishDate;

  constructor(private _router: Router, private _route: ActivatedRoute, private _jobService: JobsService, private ngbDateParserFormatter: NgbDateParserFormatter) {}

  ngOnInit() {
    this.paramsObserver = this._route.params.subscribe(params => {
    let jobId = params['jobId'];
    this._jobService
     .read(jobId)
     .subscribe(
       job => {
        this.job = job;
        this.expireDate = new Date(this.job.expireDate);
        this.publishDate = new Date(this.job.publishDate);
        this.job.expireDate = { "year": this.expireDate.getFullYear(), "month": this.expireDate.getMonth(), "day": this.expireDate.getDate() } ;
        this.job.publishDate = { "year": this.publishDate.getFullYear(), "month": this.publishDate.getMonth(), "day": this.publishDate.getDate() } ;
       },
       error => this._router.navigate(['/jobs'])
     );
   });
  }

  ngOnDestroy() {
    this.paramsObserver.unsubscribe();
  }

  update(form: NgForm) {
    this.job = form.value;
    let publishDate = this.job.publishDate;
    let expireDate = this.job.expireDate;
    let publishDateFormated = this.ngbDateParserFormatter.format(publishDate);
    let expireDateFormated = this.ngbDateParserFormatter.format(expireDate);
    this.job.publishDate = publishDateFormated;
    this.job.expireDate = expireDateFormated;
    this._jobService
      .update(this.job)
        .subscribe(savedJob => this._router.navigate(['/jobs', savedJob._id]), error => this.errorMessage = error);
 }
}

parent.template.html：

<form #myForm="ngForm" novalidate>
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <contract-type name="contractType" [job]="job" ngModel ngDefaultControl></contract-type>
      </div>
    </div>
  </div>
  <button type="button" (click)="update(myForm)" class="btn btn-primary"><i class="fa fa-save">Save</i></button>
</form>

这是我的孩子组成部分：

import { Component, Input } from '@angular/core';
import { Http } from '@angular/http';
import { NgForm, ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'contract-type',
  template: `
    <div *ngIf="contractTypes">
      <label class="form-control-label" for="contractType">Contract Type</label>
      <select id="contractType" name="contractType" required [(ngModel)]="job.contractType" class="form-control">
        <option value="0" selected>Select an item</option>
        <option *ngFor="let contractType of contractTypes" [value]="contractType.name_en">{{ contractType.name_en }}</option>
      </select>
    </div>
    `
})

export class ContractTypeComponent {
  private contractTypes;
  @Input() job;
  constructor(private _http: Http) {
    this._http.get('/api/contractTypes')
     .subscribe((res)=>{
       this.contractTypes = res.json();
    });
  }
}

我的编辑表格包含默认的先前数据：

如果单击提交按钮而没有单击合同类型下拉列表。内部帖子数据，下拉列表变为空，但如果点击该内容，则会发布其选定的选项。

注意：我也使用该子组件进行添加，因此，由于可重用性，我决定将其作为单独的组件。

提交后的表格如下：

Answer 1

只需从父组件更新功能中删除this.job = form.value;即可。但不知道原因。为什么form.value传递了错误的数据？

以编辑形式提交的Angular2子组件无法正常工作

1 个答案: