Как отправить форму в родительский компонент

Question

У меня есть реактивная форма, которую я хочу отправить значения в форме родительскому компоненту, который содержит кнопку отправки, и он должен иметь возможность обрабатывать (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 демо