Как отправить несколько форм с помощью одной кнопки в Angular Material Stepper? - PullRequest
Новая
       39

Как отправить несколько форм с помощью одной кнопки в Angular Material Stepper?

0 голосов
/ 22 октября 2018

В соответствии с моим пользовательским интерфейсом ситуация полностью отличается от этого вопроса

Как отправить форму в степпере

Мой сценарий заключается в том, что мне нужно создать один степперс несколькими формами.Чтобы.Я назначил каждую форму в отдельные компоненты.И, Моя Кнопка должна быть в шаговом компоненте, то есть только один для каждого Компонента формы.Всякий раз, когда я отправляю форму, я нажимаю кнопку «пошаговый», чтобы сохранить форму.Поэтому я использовал EventEmitter для перехвата ngSumbit из компонента stepper.Но это дает мне ошибку, что 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>

и Parrent Stepper Component, я использую выше одну кнопку Сохранить для отправки From ребенка с помощью ngSubmit.emit() это кнопка 

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

И одна изФорма моего ребенка выглядит так: 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.Может ли кто-нибудь, пожалуйста, наставить меня, чтобы решить эту проблему?

Спасибо

1 Ответ

0 голосов
/ 22 октября 2018

Попробуйте использовать ng-контент в вашем шаблоне, например

Шаблоны ваших дочерних компонентов должны быть <ng-content></ng-content>

И в вашем родительском компоненте 

...
<app-child1-form>
 <form [formGroup]="first">
  <label for="firstname">First name </label>
  <input type="text" formControlName="firstname">
</form>
</app-child1-form>
...
<app-child2-form>
<form [formGroup]="second">
 <label for="firstname">Middle name </label>
 <input type="text" formControlName="middlename">
</form>
</app-child2-form>
...
<app-child3-form>
 <form [formGroup]="third">
 <label for="firstname">Last name </label>
 <input type="text" formControlName="lastname">
</form>
</app-child3-form>
...

<button type="submit" (click)="save()">Submit</button>

И в вашем компоненте 

import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

  constructor(private fb: FormBuilder) { 
  this.first = this.fb.group({
    firstname: ['', Validators.required]
  })
  this.second = this.fb.group({
    middlename: ['', Validators.required]
  })
  this.third = this.fb.group({
    lastname: ['', Validators.required]
  })
}

И ваш метод сохранения должен выглядеть 

save() {
  if(this.first.valid) { // or you should have the condition based on your requirement
    console.log(this.first.value)
  } else if(this.second.valid) {
     console.log(this.second.value)
  } else if(this.third.valid) {
    console.log(this.third.value)
  } else {
    return;
  }
}

Надеюсь, что это может помочь вам

...