javascript - 在 Angular 5 中将多个 FormGroup 类型转换并连接为对象类型

Question

我正在使用 Angular Material 设计库的 mat-stepper。

我使用 3 个独立的 FormGroup。我将使用 httpClient 方法将信息发送到数据库，为此我创建了一个接口(interface):

export interface NouveauProjet {
    leadProj: String ;
    nomProj: String;
    descProj: String;
    besProj: Number;
    pers: [Personnes];
    Backlog: [Fonctionnalite]
}

export interface Personnes {
    name: String;
    poste:String
}
export interface Fonctionnalite {
    fonctionnalite: String;
    userStory: String 
}

在我的组件文件中，我创建了表单和包含我的值的 nouveauProject 变量。

export class AjoutProjetComponent implements OnInit {
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  thirdFormGroup: FormGroup;
  nouveauProjet: NouveauProjet;
  constructor(
    private _formBuilder: FormBuilder,
    private ajoutProj: AjoutprojService
  ) {}

  ngOnInit() {
    console.log();
    this.firstFormGroup = this._formBuilder.group({
      leadProj: ["", Validators.required],
      nomProj: ["", Validators.required],
      descProj: ["", Validators.required],
      besProj: ["", Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      pers: this._formBuilder.array([this.createItem()])
    });

    this.thirdFormGroup = this._formBuilder.group({
      backlog: this._formBuilder.array([this.createFonct()])
    });
  }

  createItem(): FormGroup {
    return this._formBuilder.group({
      name: ["", Validators.required],
      poste: ["", Validators.required]
    });
  }

  createFonct(): FormGroup {
    return this._formBuilder.group({
      fonctionnalite: ["", Validators.required],
      userStory: ["", Validators.required]
    });
  }

我在连接 formGroup.value 之前调用我的服务。

  addProjet() {
    this.nouveauProjet =
      this.firstFormGroup.value +
      this.secondFormGroup.value +
      this.thirdFormGroup.value;
    console.log(this.nouveauProjet);
    this.ajoutProj
      .addProj(this.nouveauProjet)
      .toPromise()
      .then(res => {
        console.log(res.json);
      });
  }
}

在 html 文件中，我调用 addProject 函数，然后打印 {{nouveaProjet | json}} 值我得到这个:

"[object Object][object Object][object Object]"

如何打印所有值？

更新: this.firstFormGroup.value、this.secondFormGroup.value、this.thirdFormGroup.value 按顺序给出:

Answer 1

对象无法与 + 连接，因此您可以尝试:

旧方法:

var __assign = (this && this.__assign) || Object.assign || function(t) {
  for (var s, i = 1, n = arguments.length; i < n; i++) {
    s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
        t[p] = s[p];
    }
    return t;
};
this.nouveauProjet = __assign(this.firstFormGroup.value, this.secondFormGroup.value, this.thirdFormGroup.value);

使用 ES6 spread operator :

this.nouveauProjet = {
      ...this.firstFormGroup.value,
      ...this.secondFormGroup.value,
      ...this.thirdFormGroup.value
};