[英]Passing reactive form value to another component on button click in angular
I Have two components (RegisterComponent and Subscription), the first component(RegisterComponent )contains a reactive form with three values (firstname, lastname, email) and the button register.我有两个组件(RegisterComponent 和 Subscription),第一个组件(RegisterComponent)包含一个具有三个值(名字、姓氏、电子邮件)和按钮注册的反应式表单。 I want to click register button and redirect to subscription and display firstName, lastname and email of the user.我想单击注册按钮并重定向到订阅并显示用户的名字、姓氏和 email。 registercomponent.html寄存器组件.html
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label class="float-left">firstName</label>
<input type="text" formControlName="firstName" class="form-control" />
</div>
<div class="form-group">
<label class="float-left">lastName</label>
<input type="text" formControlName="lastName" class="form-control" />
</div>
<div class="form-group">
<label class="float-left">email</label>
<input type="text" formControlName="email" class="form-control" />
</div>
</form>
registercomponent.ts注册组件.ts
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder,private router: Router) {
}
ngOnInit(): void {
this.registerForm = this.formBuilder.group({
firstName: [''],
lastName: [''],
email: ['']
});
onSubmit() {
this.router.navigate(['/Subscription']);
}
subscriptioncomponent.html订阅组件。html
<div>
Here i want to display the firstname,lastname and email of user
</div>
app-routing.module.ts应用程序路由.module.ts
{ path: "register", component: RegisterComponent },
{ path: "subscription", component:SubscriptionComponent}
How can i pass the form value to my subscriptioncomponent when i click button and to display it.当我单击按钮并显示它时,如何将表单值传递给我的订阅组件。
There are different ways to pass data from one component to a different component.有多种方法可以将数据从一个组件传递到另一个组件。
The Angular allows us to pass data to the route. Angular 允许我们将数据传递给路由。 The data can be static or dynamic.数据可以是 static 或动态的。
If you want to pass only 3 values then follow below solution:-如果您只想传递 3 个值,请遵循以下解决方案:-
registercomponent.ts注册组件.ts
onSubmit() {
const firstname = this.registerForm.get('firstname').value;
const lastname = this.registerForm.get('lastname').value;
const email = this.registerForm.get('email').value;
this.router.navigate(['/Subscription' , firstname, lastname, email]);
}
app-routing.module.ts应用程序路由.module.ts
{ path: "subscription/:firstname/:lastname/:email", component:SubscriptionComponent}
Then get the value through params in your subscriptioncomponent.然后通过订阅组件中的参数获取值。
subscriptioncomponent.ts订阅组件.ts
constructor(private route: ActivatedRoute){}
ngOnInit(){
this.route.params.subscribe(params=>{
this.firstname = params['firstname'];
this.lastname = params['lastname'];
this.email = params['email'];
})
}
Change parameter list of navigate function in onSubmit function like below在 onSubmit function 中更改导航 function 的参数列表,如下所示
onSubmit() {
this.router.navigate(['/Subscription', this.registerForm.value]);
}
// like, this.router.navigate(['/Subscription', {fName: firstName, lName: //lastName, email: email}]); // like, this.router.navigate(['/Subscription', {fName: firstName, lName: //lastName, email: email}]);
Make sure this.registerForm.value is in JSON format.确保 this.registerForm.value 为JSON格式。 In subscriptioncomponent, you can get the required value from URL, as below在订阅组件中,您可以从 URL 中获取所需的值,如下所示
this.route.paramMap.subscribe(
params => {
this.fName = params.get('fName');
this.lName = params.get('lName');
this.email = params.get('email');
});
You can pass a custom-defined state to any navigation using history.state
.您可以使用history.state
将自定义的 state 传递给任何导航。 The navigate
method has a second parameter NavigationExtras
. navigate
方法有第二个参数NavigationExtras
。
registercomponent.ts注册组件.ts
onSubmit(): void {
this.router.navigate(['/subscription'], {
state: this.registerForm.value // <-- set custom-defined state here
});
}
subscriptioncomponent.ts订阅组件.ts
ngOnInit(): void {
const { firstname, lastname, email } = history.state
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.