Angular 如何将表单发送到父组件

我有一个reactiveForm，我想将表单中的值发送到包含submit按钮的父组件，它需要能够处理表单中的（

ngSumbmit）

。如果无法实现我想要的，我只需在

表单中添加按钮即可

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> 

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

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> 

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


您可以这样做

下面是一个例子

在
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>

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

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

这里的演示
一种方法是通过输出将数据发送到父组件。是的，我知道可以通过输出完成，但使用输出将需要一个事件管理器…如果我没有按钮，如何使用输出？为什么需要将表单或其值发送到父组件？当在父组件中单击“提交”按钮时，您只能访问子组件及其表单值。@Himanshu我需要发送它，因为“提交”按钮位于父组件中。我可以使用ViewChild，对吗？是的！使用
ViewChild
访问子组件。当在父组件中单击submit按钮时，您可以访问表单值。您是对的。5分钟前我自己就知道了，但我还是要相信你。谢谢我唯一无法理解的是，如果我在submit按钮中有一个The disabled指令来检查表单是否有效，它仍然是无效的。我在父组件的ngOnit（）中有它
this.validCfrom=this.creditCardFormGroup.creditCardForm.valid为什么不将creditCardForm作为输入传递？（creditCardform属于父公司）。我觉得这是更自然的方式。@TamoDev你们可以用这种方式检查表格是否有效。。。提交我已经更新了演示为well@Eliseo有很多方法可以做到这一点，但根据“TamoDev”的要求，这是唯一的方法。