如何将表单发送到父组件

Question

我有一个 reactiveForm，我想将表单中的值发送到包含提交按钮的父组件，它需要能够处理表单中的 (ngSumbmit)。如果它'无法完成我想要的，我将在 form.

中添加按钮

HTML-子组件

  <form class="credit-card-form" [formGroup]="creditCardForm" (ngSubmit)="onSubmitPayment()">
    <div class="credit-card-form-wrapper">
      <div class="row">
        <label class="x-field-label x-top-aligned-field-label label-top-inputs">Cardholder Name</label>
        <input type="text" pInputText formControlName="cardHolderName" required/>
      </div>
      <div class="row">
        <label class="x-field-label x-top-aligned-field-label label-top-inputs">Company Name</label>
        <input type="text" pInputText formControlName="companyName" required/>
      </div>
      <div class="row">
        <label class="x-field-label x-top-aligned-field-label label-top-inputs">Credit Card # <i>(Accepting VISA, Mastercard,
            AmEX)
          </i></label>
        <input type="text" pInputText formControlName="CCNumber" required/>
      </div>
    </div>
  </form>

TS

  creditCardForm = this.fb.group({
    cardHolderName: ['', Validators.required],
    companyName: ['', Validators.required],
    CCNumber: ['', Validators.required],
  });

HTML-父组件

<div class="pay-storage-container">
  <div class="pay-storage-inner">
    <app-credit-card></app-credit-card>
  </div>
  <div class="footer-container">
    <button pButton type="button" label="Submit Payment" class="x-primary-green-400"></button>
  </div>
</div>

Answer 1

你可以喜欢这个，

这是一个例子

在child.component.html

<form class="credit-card-form" [formGroup]="creditCardForm">
    <div class="credit-card-form-wrapper">
        <div class="row">
            <label class="x-field-label x-top-aligned-field-label label-top-inputs">Cardholder Name</label>
            <input type="text" pInputText formControlName="cardHolderName" required/>
        </div>
        <div class="row">
            <label class="x-field-label x-top-aligned-field-label label-top-inputs">Company Name</label>
            <input type="text" pInputText formControlName="companyName" required/>
        </div>
        <div class="row">
            <label class="x-field-label x-top-aligned-field-label label-top-inputs">Credit Card # <i>(Accepting VISA, Mastercard,
            AmEX)
          </i></label>
            <input type="text" pInputText formControlName="CCNumber" required/>
        </div>
    </div>
</form>

并在 child.component.ts

creditCardForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {

    this.creditCardForm = this.fb.group({
      cardHolderName: ['', Validators.required],
      companyName: ['', Validators.required],
      CCNumber: ['', Validators.required],
    });
  }

并在 parent.component.html

<div class="pay-storage-container">
    <div class="pay-storage-inner">
        <app-child #child></app-child>
    </div>
    <div class="footer-container">
        <button pButton type="button" label="Submit Payment" class="x-primary-green-400" (click)="onSubmitPayment()">Submit</button>
    </div>
</div>

parent.component.ts

@ViewChild('child') childCompopnent: any;

  ngOnInit(){ }

  onSubmitPayment(){
    console.log(this.childCompopnent.creditCardForm.value);
  }

这里是 Stackblitz 演示

如何将表单发送到父组件

How to send a form to parent component

forms

angular

angular-reactive-forms