1

私のUIによると、状況はこの質問とはまったく異なります

ステッパーでフォームを送信する方法

私のシナリオでは、複数のフォームを持つ 1 つのステッパーを作成する必要があります。となることによって。各フォームを個々のコンポーネントに割り当てました。また、My Button はステッパー コンポーネントにある必要があります。これは、フォーム コンポーネントごとに 1 つだけです。フォームを送信するたびに、ステッパー送信ボタンをクリックしてフォームを保存します。したがって、EventEmitter を使用してステッパー コンポーネントから ngSumbit をキャッチしました。しかし、ngSubmit が未定義であるというエラーが表示されます。私のparent.stepper.component.htmlは

<hr>
<div fxLayout="row" fxLayoutGap="70vw">
<button (click)="child1Form.ngSubmit.emit();child2Form.ngSubmit.emit();child3Form.ngSubmit.emit()"  type="submit" mat-raised-button class="btn-submit">Save</button>
</div>
<hr>  
<mat-horizontal-stepper #stepper>
  <mat-step [stepControl]="firstFormGroup" >
      <ng-template matStepLabel>Child1</ng-template>
      <app-child1-form></app-child1-form>
      <div>
          <button mat-button matStepperNext>Next</button>
      </div>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
      <ng-template matStepLabel>Child2</ng-template>
      <app-child2-form></app-child2-form>
      <div fxLayout="row" fxLayoutGap="70vw">
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button matStepperNext>Next</button>
        </div>
  </mat-step>
  <mat-step>
      <ng-template matStepLabel>Child3</ng-template>
      <app-child3-form></app-child3-form>
      <div fxLayout="row" fxLayoutGap="70vw">
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button matStepperNext>Next</button>
        </div>
  </mat-step>
  <mat-step>
      <ng-template matStepLabel>Done</ng-template>
      You are now done.
      <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button (click)="stepper.reset()">Reset</button>
      </div>
  </mat-step>
</mat-horizontal-stepper>

これは私の親コンポーネントです。そして子はすべての形に属します。お気に入り

<app-child1-form> </app-child1-form>
<app-child2-form> </app-child2-form>
<app-child3-form> </app-child3-form>

親ステッパーコンポーネント、私はこれを使用して子のFromを送信するために1つの保存ボタンの上を使用してngSubmit.emit()います。これはボタンです

<button (click)="child1Form.ngSubmit.emit();child2Form.ngSubmit.emit();child3Form.ngSubmit.emit()"  type="submit" mat-raised-button class="btn-submit">Save</button>

そして、私の子供のフォームの1つは次のようになりますchild1form.component.html

<form #child1Form="ngForm" fxLayout="row wrap" [formGroup]="firstFormGroup" fxLayoutGap="10px" (ngSubmit)="saveChild1Form()" fxLayoutAlign="center baseline">
  <mat-card-content fxLayout="column">
    <!-- Activity -->
    <mat-form-field appearance="outline">
      <mat-label>Description </mat-label>
      <textarea  required matInput formControlName="firstCtrl"  ng-trim="false" ></textarea>
    </mat-form-field>
  </mat-card-content>
</form>

child1.component.tsファイルは

import { Component, OnInit, Output, EventEmitter, Input, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, NgForm, FormGroupDirective } from '@angular/forms';

@Component({
  selector: 'app-child1-form',
  templateUrl: './child1-form.component.html',
  styleUrls: ['./child1-form.component.css']
})
export class Child1FormComponent implements OnInit {

  firstFormGroup: FormGroup;
 @Output() child1Form: EventEmitter<any> = new EventEmitter<any>();
  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: [''],
      secondtCtrl: ['']
    });
  }

  saveChild1Form() {
    console.log(this.firstFormGroup.value);
  }

}

すべての子フォームは似ています。そのため、ここでは他の子コンポーネントについては書きませんでした。私の問題は、から保存ボタンをクリックするたびにparent.stepper.component.html、エラーが発生することngSubmit is undefinedです。この問題を解決するために誰か私を指導してもらえますか?

ありがとう

4

1 に答える 1