使用服务的具有多个表单的单个提交按钮
Single submit button with multiple form using service
我有一个要求,应该能够用不同的单个按钮提交多个表单 component.It 可以实现吗? .这是我提供的演示代码和Stackblitz作为您的参考。
提交按钮组件
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}});
}
表单组件
一个
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 );
}
Edit
提交组件
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") }
}
StackBlitz 不允许我保存更改,因此我在此处发布相关代码。正如我上面所说,我想我会改变布局,以便输入和输出可以与提交、一个和两个组件一起使用。
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() { }
}
我有一个要求,应该能够用不同的单个按钮提交多个表单 component.It 可以实现吗? .这是我提供的演示代码和Stackblitz作为您的参考。
提交按钮组件
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}});
}
表单组件
一个
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 );
}
Edit
提交组件
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") }
}
StackBlitz 不允许我保存更改,因此我在此处发布相关代码。正如我上面所说,我想我会改变布局,以便输入和输出可以与提交、一个和两个组件一起使用。
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() { }
}