Question

我有一个reactForm，我想将表单中的值发送到包含Submit按钮的父组件，并且它需要能够处理表单中的{[[df.loc[z,y] for z,y in zip(x,df.columns)] for x in l ] Out[981]: [[5, 7, 3], [4, 2, 5]]。如果不是可能会完成我想要的事情，我只需要在ngSumbmit)内添加按钮即可。

HTML -子组件

form

TS

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

HTML -父组件

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

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

如何将表单发送到父组件

1 个答案: