Im using mat-stepper of Angular Material design library.

I use 3 separate FormGroups. I would send informations to database using httpClient method, for that I have created an 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 
}

In my ponent file I create forms and nouveauProject variable that will contain my values .

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]
    });
  }

I call my service and before I concatenate 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);
      });
  }
}

In html file I call addProject function then I print {{nouveaProjet | json}} value I get this :

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

How to print all values ?

Update: this.firstFormGroup.value, this.secondFormGroup.value, this.thirdFormGroup.value gives in order :

Im using mat-stepper of Angular Material design library.

I use 3 separate FormGroups. I would send informations to database using httpClient method, for that I have created an 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 
}

In my ponent file I create forms and nouveauProject variable that will contain my values .

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]
    });
  }

I call my service and before I concatenate 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);
      });
  }
}

In html file I call addProject function then I print {{nouveaProjet | json}} value I get this :

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

How to print all values ?

Update: this.firstFormGroup.value, this.secondFormGroup.value, this.thirdFormGroup.value gives in order :

• javascript
• angular

1 Answer 1

Object cannot be concatenated with + so you could try:

Old way:

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

Using ES6 spread operator:

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