How to parse user input to new component in angular on submit?-CodePudding

I have a simple form with form validations. I want to display the user input in another component but I am unsure of how to do so. I would like to use @Input to parse the info from one component to another. Im not quite sure how to implement it despite reading about it online.

html

<form [formGroup]="checkOutForm" (ngSubmit)="submit()">
                <div >
                    <div><label></label></div>
                    <input size="50" type="text" placeholder="Name" formControlName="name">
                </div>
                <div  *ngIf="fc.name.errors && isSubmitted">
                    <div *ngIf="fc.name.errors.required">Should not be empty</div>


                </div>
                <div >
                    <div><label></label></div>
                    <input size="50" type="email" placeholder="Email" formControlName="email">
                </div>
                <div  *ngIf="fc.email.errors && isSubmitted">
                    <div *ngIf="fc.email.errors.required">Should not be empty</div>
                    <div *ngIf="fc.email.errors.email">Email is not correct</div>

                </div>

                <div >
                    <div><label></label></div>
                    <input size="50" type="address" placeholder="Address" formControlName="address">
                </div>
                <div  *ngIf="fc.address.errors && isSubmitted">
                    <div *ngIf="fc.address.errors.required">Should not be empty</div>
                </div>


                <br>
                <div ></div>
                <button type="submit">Submit Order Details</button>
            </form>

import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Router, RouterLink } from '@angular/router';
import { CartService } from '../cart.service';
import { Cart } from '../models/Cart';
import { Order } from '../models/Order';


@Component({
  selector: 'app-checkout-page',
  templateUrl: './checkout-page.component.html',
  styleUrls: ['./checkout-page.component.css']
})
export class CheckoutPageComponent implements OnInit {
  order:Order = new Order();
  checkOutForm!: FormGroup;
  isSubmitted = false;
  

  constructor(private formbuilder: FormBuilder,cartService: CartService,private route: Router) {
    const cart = cartService.getCart();
    this.order.items = cart.items;
    this.order.totalPrice = cart.totalPrice;
    

  }

  ngOnInit(): void {
   
    this.checkOutForm = this.formbuilder.group({
     
      name: ['', [Validators.required],],
      email: ['', [Validators.required, Validators.email]],
      address: ['', [Validators.required]],
    });
    //loginForm.controls.email
    //use getter property instead
    //fc.email
  }
  get fc() {
    return this.checkOutForm.controls;
  }
  submit() {
    this.isSubmitted = true;
    if (this.checkOutForm.invalid)
      return
     
      console.log(`name: ${this.fc.name.value},email: ${this.fc.email.value},address: ${this.fc.address.value}`);
    alert('Your order has been placed! Order will be delivered upon successful payment.')
    this.route.navigate(['/order-summary']);
    
  }






}

Just ignore the cart service and models

CodePudding user response：

If the component in which you want to display the info is in the CheckoutPageComponent, let's assume this component is named ChildComponent. I will also assume that the info you want to pass is the property "name". The way to take it as input in the ChildComponent is as follows:

Add the ChildComponent to the template and pass the name property.

CheckoutPageComponent.html

...
<app-child [name]="fc.name.value"></app-child>
...

Create the ChildComponent

ChildComponent.html

<p *ngIf="name">{{name}}</p>

ChildComponent.ts

...
export class ChildComponent {
...
    @Input() name: string | undefined = undefined;
...
}

CodePudding user response：

So you want your show your order detail in order-summary

If you want to use @Input then it must be your order-summary component selector used in your CheckoutPageComponent HTML Then you can use @Input.Basically it will work only when you have parent ,child relation between the component
If your component is not in relation then use services.enter link description here save your data in services and use that in your CheckoutPageComponent