CODEWITHSUNDEEP
angulartypescriptangular-forms
javiens
javiens

Reputation: 141

Single submit button with multiple form using service

I have one requirement where should be able to submit multiple form with single button with different component.It is possible to implement it? . This is I provided a demo code and Stackblitz as your reference.

Submit Button Component

HTML

 <div class="form-group">
   <button class="btn btn-primary" (click)="submitBtn()">Save</button>
</div>

Component.ts

  @Output() submitBtnClickEvt: EventEmitter<any> = new EventEmitter<any>();
  constructor() { }

  ngOnInit() {
  }
    submitBtn() {
    console.log('Submit clicked');
    this.submitBtnClickEvt.emit({details: { clicked: true}});
  }

Form Component

One

HTML

<div class="formContainer">
  <h5>One</h5>
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <input type = "text" name = "fullName" placeholder = "Your full name" formControlName="fullName" >
  <br/>

  <input type = "email" name = "email" placeholder = "Your email" formControlName="email" >
  <br/>

  <textarea name = "message" placeholder = "Your message" formControlName="message" ></textarea>

</form>


</div>

Component

createContactForm(){
    this.contactForm = this.formBuilder.group({
      fullName: [''],  
      email: [''],
      message: ['']
    });
  }

  onSubmit() {
      console.log('Your form data : ', this.contactForm.value );
  }

Two

HTML

<div class="formContainer">
  <h5>Two</h5>
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <input type = "text" name = "fullName" placeholder = "Your full name" formControlName="fullName" >
  <br/>

  <input type = "email" name = "email" placeholder = "Your email" formControlName="email" >
  <br/>
  <input type = "password" name = "password" placeholder = "Your password" formControlName="password" >


</form>


</div>

Component

 createContactForm(){
    this.contactForm = this.formBuilder.group({
      fullName: [''],  
      email: [''],
      password: ['']
    });
  }

  onSubmit() {
      console.log('Your form data : ', this.contactForm.value );
  }

Edit

Submit Component

  constructor(
    private submitService: SubmitService
  ) {}


  ngOnInit() {
    combineLatest([
      this.submitService.setFormConfDetailValue$.asObservable()
    ])
    .pipe(
         tap(([ formTwo]) => {
           if (formTwo) {
             console.log('Form data: ', formTwo);
           }

    })
    ).subscribe();

  }

  submitBtn() {
    console.log('Submit clicked');
    this.submitService.submitForms$.next();

  }

Submit Service

import { EventEmitter, Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';

@Injectable()
export class SubmitService {

public submitForms$: Subject<any> = new Subject();
public setFormConfDetailValue$: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor() {console.log("test from service") }

}

Upvotes: 1

Views: 1818

Answers (1)

tuckerjt07
tuckerjt07

Reputation: 922

StackBlitz isn't letting me save my changes so I'm posting the pertinent code here. As I said above I think I would change the layout so that inputs and outputs could be used with submit, one and two components.

submit.component.ts

import { Component, OnInit, EventEmitter, Output, OnDestroy } from "@angular/core";
import { SubmitService } from "./submit.service";
import { combineLatest, Subject } from "rxjs";
import { tap, takeUntil } from "rxjs/operators";

@Component({
  selector: "app-submit",
  templateUrl: "./submit.component.html",
  styleUrls: ["./submit.component.css"]
})
export class SubmitComponent implements OnInit {
  @Output() submitBtnClickEvt: EventEmitter<any> = new EventEmitter<any>();

  constructor(private submitService: SubmitService) {}

  ngOnInit() {
      combineLatest([
        this.submitService.setFormOneValue$.asObservable(),
        this.submitService.setFormTwoValue$.asObservable()
      ])
      .pipe(
           tap(([formOne, formTwo]) => {
             if (formOne || formTwo) {
               console.log('Form data: ', formOne, formTwo);
             }

      })
      ).subscribe();
  }


  submitBtn() {
    console.log("Submit clicked");
    // this.submitBtnClickEvt.emit({ details: { clicked: true } });
    this.submitService.submitForms$.next();
  }
}

one.component.ts

...
constructor(private formBuilder: FormBuilder, private submitService: SubmitService)
...
ngOnInit() {
    this.submitService.submitForms$.subscribe(() => {
      this.submitService.setFormOneValue$.next(this.contactForm.value);
    });
}
...

one.component.ts

...
constructor(private formBuilder: FormBuilder, private submitService: SubmitService)
...
ngOnInit() {
    this.submitService.submitForms$.subscribe(() => {
      this.submitService.setFormTwoValue$.next(this.contactForm.value);
    });
}
...

submit.service.ts

import {Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';

@Injectable()
export class SubmitService {

  public submitForms$: Subject<any> = new Subject();
  public setFormOneValue$: BehaviorSubject<any> = new BehaviorSubject(null);
  public setFormTwoValue$: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor() { }

}

Upvotes: 3

Related Questions