taking user input using a form and share that data into a different component for displaying it

Question

i have a form field taking user inputs of name,email,subject. Now, how to share these data to a different component of same module to display it.

<div class="jumbotron">
  <form [formGroup]="suggestForm" (ngSubmit)="onSubmit(suggestForm.value)">
      <div class="form-group">
          <input type="text" formControlName="name" class="form-control" id="exampleInputName"  placeholder="Full Name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
          <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
              <div *ngIf="f.name.errors.required">Name is required</div>
          </div>
        </div>
  <div class="form-group">
    <input type="email" formControlName="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
    <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
        <div *ngIf="f.email.errors.required">Email is required</div>
        <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
    </div>
  </div>
  <div class="form-group">
      <input type="text" formControlName="subject" class="form-control" id="exampleInputSubject"  placeholder="What's the subject?" [ngClass]="{ 'is-invalid': submitted && f.subject.errors }">
      <div *ngIf="submitted && f.subject.errors" class="invalid-feedback">
          <div *ngIf="f.subject.errors.required">Subject is required</div>
      </div>
  </div>
  <div class="form-group">
      <textarea type="text" formControlName="story" class="form-control" id="exampleInputStory"  placeholder="What's the story?" [ngClass]="{ 'is-invalid': submitted && f.story.errors }">
          <div *ngIf="submitted && f.story.errors" class="invalid-feedback">
              <div *ngIf="f.story.errors.required">Story is required</div>
          </div>
      </textarea>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

the above is for form field taking user input

    result: SuggestForm;
    suggestForm: FormGroup;
    submitted = false;

    ngOnInit() {
      this.suggestForm = this.formBuilder.group({
        name: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        subject: ['', Validators.required],
        story: ['', Validators.required]
      });
    }

    get f() { return this.suggestForm.controls; }

    onSubmit() {
      this.submitted = true;

      if (this.suggestForm.invalid) {
        return;
      }

      alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.suggestForm.value));
      result = Object.assign({}, this.suggestForm.value);
      console.log(result);
    }

this above code is the component.ts file in angular

export class SuggestForm {
    name: string;
    email: string;
    subject: string;
    story: string;
  }

the above is the SuggestForm.ts class

how to use that result object in a different component for displaying the input values

Try: https://stackoverflow.com/questions/39325503/how-to-pass-data-between-two-components-in-angular-2 — Prashant Pimpale, Apr 11 '19 at 08:18
Useful article:https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ — Prashant Pimpale, Apr 11 '19 at 08:19
here you can see the complete example of inter component communication: https://stackoverflow.com/questions/55252637/is-there-a-method-to-do-communication-between-two-components-which-are-not-paren/55253276#55253276 — Yash Rami, Apr 11 '19 at 08:55
how to take that result object in my code as behaviourial subject in service @YashRami — user9885720, Apr 11 '19 at 10:27
you need to create a service for that. Let me write a answer so you will get better understanding — Yash Rami, Apr 11 '19 at 10:29

score 0 · Answer 1 · answered Apr 11 '19 at 10:40

SuggestForm.ts

import 'MessageService' from './messageService.ts'
result: SuggestForm;
suggestForm: FormGroup;
submitted = false;

constructor(private msgSer: MessageService)
ngOnInit() {
  this.suggestForm = this.formBuilder.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    subject: ['', Validators.required],
    story: ['', Validators.required]
  });
}

get f() { return this.suggestForm.controls; }

onSubmit() {
  this.submitted = true;

  if (this.suggestForm.invalid) {
    return;
  }

  alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.suggestForm.value));
  result = Object.assign({}, this.suggestForm.value);
  this.msgSer.setMessage(result);
  console.log(result);
}

Create a new service for an example message service

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()

export class MessageService {
public message = new Subject<string>();
setMessage(value: string) {
   this.message.next(value); //it is publishing this value to all the subscribers 
   that have already subscribed to this message
  }
}

here are the other components which subscribe to that subject so whenever you set the results these components will get latest value.

coponentOne.ts

   ngOninit() {
    this.messageService.message.subscribe((message) => {
        console.log(message);
    });
   }

coponentTwo.ts

   ngOninit() {
    this.messageService.message.subscribe((message) => {
        console.log(message);
    });
   }

I hope it helps you out.

I want to know, how to take that "result object" as behavioral subject, instead of string? — user9885720, Apr 11 '19 at 10:55
you can assign that result variable as behavior subject in SuggestForm.ts — Yash Rami, Apr 11 '19 at 10:59

taking user input using a form and share that data into a different component for displaying it

1 Answers1