Passing reactive form value to another component on button click in angular

Question

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. I want to click register button and redirect to subscription and display firstName, lastname and email of the user. registercomponent.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

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

<div>
    Here i want to display the firstname,lastname and email of user
</div>

app-routing.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.

you can use a shared service for that. set data in the service in your register component, and you can retrieve it in the subscription component — D Pro
– D Pro, Commented Jul 17, 2020 at 15:14

Durgesh Pal · Accepted Answer · 2020-07-17 15:30:22Z

There are different ways to pass data from one component to a different component.

The Angular allows us to pass data to the route. The data can be static or dynamic.

If you want to pass only 3 values then follow below solution:-

registercomponent.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

{ path: "subscription/:firstname/:lastname/:email", component:SubscriptionComponent}

Then get the value through params in your subscriptioncomponent.

subscriptioncomponent.ts

constructor(private route: ActivatedRoute){}

ngOnInit(){

this.route.params.subscribe(params=>{
 this.firstname = params['firstname'];
 this.lastname = params['lastname'];
 this.email = params['email'];
})
 
}

Kaal · Accepted Answer · 2020-07-17 15:41:01Z

Change parameter list of navigate function in onSubmit function like below

onSubmit() {
    this.router.navigate(['/Subscription', this.registerForm.value]);
}

// like, this.router.navigate(['/Subscription', {fName: firstName, lName: //lastName, email: email}]);

Make sure this.registerForm.value is in JSON format. In subscriptioncomponent, you can get the required value from URL, as below

this.route.paramMap.subscribe(
    params => {
        this.fName = params.get('fName');
        this.lName = params.get('lName');
        this.email = params.get('email');
    });

Empty Brain · Accepted Answer · 2022-02-04 20:30:22Z

0

You can pass a custom-defined state to any navigation using history.state. The navigate method has a second parameter NavigationExtras.

registercomponent.ts

onSubmit(): void {
  this.router.navigate(['/subscription'], {
    state: this.registerForm.value // <-- set custom-defined state here
  });
}

subscriptioncomponent.ts

ngOnInit(): void {
  const { firstname, lastname, email } = history.state
}

answered Feb 4, 2022 at 20:30

Empty Brain

6379 silver badges24 bronze badges

Collectives™ on Stack Overflow

Passing reactive form value to another component on button click in angular

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related