如何在提交时解析新组件的用户输入？

Question

我有一个简单的表格，里面有表格验证。我想在另一个组件中显示用户输入，但我不确定如何这样做。我想使用@Input来解析从一个组件到另一个组件的信息。尽管我在网上读到了关于它的文章，但我还是不知道如何实现它。

html

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


                </div>
                <div class="input-container">
                    <div><label></label></div>
                    <input size="50" type="email" placeholder="Email" formControlName="email">
                </div>
                <div class="error-list" *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 class="input-container">
                    <div><label></label></div>
                    <input size="50" type="address" placeholder="Address" formControlName="address">
                </div>
                <div class="error-list" *ngIf="fc.address.errors && isSubmitted">
                    <div *ngIf="fc.address.errors.required">Should not be empty</div>
                </div>


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

ts

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']);
    
  }






}

只需忽略购物车服务和模型

Answer 1

如果要在其中显示信息的组件在CheckoutPageComponent中，那么让我们假设这个组件名为ChildComponent。我还将假设您要传递的信息是属性“名称”。将其作为ChildComponent中的输入的方法如下：

1. 将ChildComponent添加到模板并传递name属性。

CheckoutPageComponent.html

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

1. 创建ChildComponent

ChildComponent.html

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

ChildComponent.ts

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

Answer 2

因此，您希望在 order -汇总中显示您的订单细节。

1. 如果您想使用CheckoutPageComponent @，那么它必须是您的命令摘要组件选择器，然后您可以使用@Input.Basically，只有在组件之间有父、子关系时才能使用@Input.Basically。
2. 如果您的组件不是相关的，那么使用服务。在这里输入链接描述将数据保存在服务中，并在您的在这里输入链接描述中使用。