Problems sending information from one form to another component

Question

I'm trying to send my form information to another component, using classes and services,i've tried almost everything that's on google but nothing still works for me, the action is kind of complex for me as I'm starting at angula, you can give me some idea of how to do this without making so much complicated, please, here's my code:

User.Services.ts

import { Injectable } from "@angular/core";
import { Usuario } from "../model/usuario";
import { Observable, Subject } from "rxjs";

@Injectable()
export class UsuarioServices {
  public usuario: Array<Usuario>;
  private subject = new Subject<any>();
  constructor() {
    //Iniciamos el mensaje para que pueda tener contenido

  }

   public sendInfo(
      name: String, lastname: String, direction: String, apt: String, country: String, cardtype: String,
      cardnumber: any, cvc: any, month: any, year: any, email: any, checkbox: any
    ):Array<Usuario>{

      this.subject.next(this.usuario=[new Usuario(name, lastname, direction, apt, country,
        cardtype, cardnumber, cvc, month, year, email, checkbox)])

      return this.usuario;
    }

  clearMessage() {
    this.subject.next();
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }
}

component by which I capture the information on the form:

import { Component, OnInit } from "@angular/core";
import {
  AbstractControl,
  FormBuilder,
  FormGroup,
  Validators,
  ControlContainer
} from "@angular/forms";
import { Usuario } from "../../model/usuario";
import { UsuarioServices } from "../../Services/usuario.service";

@Component({
  selector: "app-data-form",
  templateUrl: "./data-form.component.html",
  styleUrls: ["./data-form.component.css"],
  providers: [UsuarioServices]
})
export class DataFormComponent implements OnInit {
  public formGroup: FormGroup;
  private firstname: String;
  private lastname: String;
  private direction: String;
  private apt: String;
  private country: String;
  private card_type: String;
  private card_number: any;
  private cvc: any;
  private month: any;
  private year: any;
  private email: any;
  private checkBoxValue: any = false;
  public userdos: Array<Usuario>;

  constructor(
    private formBuilder: FormBuilder,
    private _UsuarioServices: UsuarioServices
  ) {}

  ngOnInit() {
    this.buildForm();
  }

  private buildForm() {
    this.formGroup = this.formBuilder.group({
      name: [this.firstname, Validators.required],
      lastname: [this.lastname, Validators.required],
      email: [this.email, [Validators.email, Validators.required]],
      addres: [this.direction, Validators.required],
      apt: [this.apt, Validators.required],
      tel: ["", [Validators.required, this.validatePassword]],
      country: [this.country, Validators.required],
      cardtype: [this.card_type, Validators.required],
      number: [this.card_number, Validators.required],
      cvc: [this.cvc, Validators.required],
      month: [this.month, Validators.required],
      year: [this.year, Validators.required]
    });
  }

  public send() {
    var user = this.formGroup.value;
    this.userdos = this._UsuarioServices.sendInfo(user.name,user.lastname,user.addres,user.apt,
      user.country,user.cardtype,user.number,user.cvc,user.month,user.year,user.email,this.checkBoxValue
    );

    //  console.log(this.datainfo.Getfirstname);
  }

}

Component where I have tried to receive the information:

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Usuario } from "../../model/usuario";

import { UsuarioServices } from "../../Services/usuario.service";

import { Subscription } from "rxjs";

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"],
  providers: [UsuarioServices]
})
export class CardComponent implements OnDestroy {
  public message: any;
  public subscription: Subscription;

  constructor(private _UsuarioServices: UsuarioServices) {

    this.subscription = this._UsuarioServices.getMessage()
      .subscribe(message => { this.message = message; });
      console.log(this.message);
  }


  ngOnDestroy() {

    this.subscription.unsubscribe();
  }

}

Notice that in the referenced answer, the service __is not__ _provided_ at component level (by adding the type info the _providers_ array in the decorator) — Jota.Toledo, Aug 08 '19 at 09:30

Vivek Doshi · Accepted Answer · 2019-08-08T09:23:49.110

1

This is how Subject works , in your case you can use BehaviorSubject

A BehaviorSubject holds one value. When it is subscribed it emits the value immediately. A Subject doesn't hold a value.

Try using :

private subject = new BehaviorSubject<any>(null);

insteadOf

private subject = new Subject<any>();

For More Detail : DO READ

SAMPLE DEMO (with same issue)

For testing open user.service.ts

Try both method one by one

private myUser = new BehaviorSubject(null);

private myUser = new Subject<any>();

edited Aug 08 '19 at 09:23

answered Aug 08 '19 at 09:19

Vivek Doshi

56,649
12
110
122

@StevenColocho, Glad to know, Happy coding BTW :) – Vivek Doshi Aug 08 '19 at 09:37
Your demo is not an accurate reproduction of OPs situation. There is another factor that contributes to the issue. Furthermore, you are exemplifying a really bad practice: manual subscription but no unsubscription of a global service. – Jota.Toledo Aug 08 '19 at 14:18
@Jota.Toledo, that's why I named it sample demo, for "but no unsubscription" he has already made it and in my demo it's bind with html so need to unsubscribe that be handled automatically – Vivek Doshi Aug 08 '19 at 14:21
That makes no sense, can you reformulate? Anyway, ping me if you improve your answer in order to remove the downvote. – Jota.Toledo Aug 08 '19 at 14:25

Problems sending information from one form to another component

1 Answers1