如何解决Angular 9使用行为主体来回维护状态
我有表单向导,所以我想来回移动,所以我正在使用行为主题。但是单击后退按钮,我没有得到以前的表单值。我不希望它存储在历史状态。请帮助我如何实现这一目标。我为来回创建了通用服务。如果我做错了事,请纠正我。 Rxjs,但返回到page1,它具有最新值,例如form2。我的期望是维护状态并使用rxjs修补表单值
FormComponent2(模板)
features = ["vendored"]
FormComponent2(ts)
<form [formGroup]="form2Back" (ngSubmit)="refresh()">
<input type="text" formControlName="lName">
<input type="submit">
</form>
Component1(模板)
import { Component,OnInit } from '@angular/core';
import { FormBuilder,FormControl,Validators,FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { CommonService } from '../common.service';
@Component({
selector: 'app-form2',templateUrl: './form2.component.html',styleUrls: ['./form2.component.scss']
})
export class Form2Component implements OnInit {
form2Back: FormGroup;
constructor(private fb: FormBuilder,private router: Router,private commonService: CommonService) {}
ngOnInit(): void {
this.form2Back = this.fb.group({
lName: new FormControl('',[Validators.required])
});
}
refresh() {
const datas2 = {
...this.form2Back.value,}
this.commonService.datValue.next({
datas2
});
this.router.navigateByUrl('/');
}
}
Component1(ts)
<form [formGroup]="contactForm" (ngSubmit)="refresh()">
<input type="text" formControlName="firstName">
<input type="submit">
</form>
常用服务
:import { Component,OnInit,Input,ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core';
import { FormGroup,FormBuilder,FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { CommonService } from '../common.service';
@Component({
selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.scss'],})
export class ChildComponent implements OnInit {
@Input() public data: string[];
public contactForm: FormGroup;
constructor(private cd: ChangeDetectorRef,private fb: FormBuilder,private cs: CommonService) {}
ngOnInit(): void {
this.contactForm = this.fb.group({
firstName: new FormControl('',[Validators.required])
});
}
refresh() {
const datas = {
...this.contactForm.value,}
this.cs.datValue.next({
...this.cs.datValue,insured: datas,});
this.router.navigateByUrl('/form')
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。