angular - 使用服务的具有多个表单的单个提交按钮

Question

我有一个要求，应该能够使用具有不同组件的单个按钮提交多个表单。可以实现吗？. 这是我提供的演示代码和Stackblitz作为您的参考。

提交按钮组件

HTML

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

组件.ts

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

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

表单组件

一

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>

零件

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

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

二

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>

零件

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

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

编辑

提交组件

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

  }

提交服务

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") }

}

标签： angulartypescriptangular-forms

Answer 1

StackBlitz 不允许我保存我的更改，所以我在这里发布相关代码。正如我上面所说，我想我会改变布局，以便输入和输出可以与提交、一和二组件一起使用。

提交.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);
    });
}
...

提交.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() { }

}