Angular -如何将材料步进器保存到单个表中

Question

在我的Angular-11中，我有这个材料步进器：

最重要的是，我有这个登录组件typescript：

​

import {
  Component,
  OnInit
} from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators
} from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isLinear = true;
  formNameGroup: FormGroup;
  formPasswordGroup: FormGroup;
  formEmailGroup: FormGroup;
  formPhoneGroup: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  ngOnit() {}
  createForm() {
    this.formNameGroup = this.fb.group({
      userName: ['', Validators.required]
    });

    this.formPasswordGroup = this.fb.group({
      passWord: ['', Validators.required]
    });
    this.formEmailGroup = this.fb.group({
      emailID: ['', Validators.compose([Validators.required, Validators.email])]
    });
    this.formPhoneGroup = this.fb.group({
      mobile: ['', Validators.compose([Validators.required, Validators.min(10)])]
    });
  }

  onSubmit() {
    return this.api.post('signup', data, header)
  }
}

​

在用户登录compnent.ts之后，我得到了如下所示的登录html：

​

<h2 align="center"> Material Stepper Example </h2>
<mat-horizontal-stepper [linear]="isLinear" #stepper labelPosition="bottom">
  <mat-step [stepControl]="formNameGroup" label="Name">
    <div style="padding-top: 3%;">
      <form [formGroup]="formNameGroup">
        <!-- <ng-template matStepLabel>Name</ng-template> -->
        <div class="example-form">
          <mat-form-field class="example-full-width">
            <input matInput placeholder="Name" required formControlName="userName">
            <mat-error *ngIf="formNameGroup.controls['userName'].hasError('required')">
              Username is required!
            </mat-error>
          </mat-form-field>
        </div>
        <br/>
        <button mat-raised-button color="primary" matStepperNext>Next</button>
      </form>
    </div>
  </mat-step>

  <mat-step [stepControl]="formPasswordGroup" label="Password">
    <div style="padding-top: 3%;">
      <form [formGroup]="formPasswordGroup">
        <!-- <ng-template matStepLabel>Name</ng-template> -->
        <div class="example-form">
          <mat-form-field class="example-full-width">
            <input type="password" matInput placeholder="Password" required formControlName="passWord">
            <mat-error *ngIf="formPasswordGroup.controls['passWord'].hasError('required')">
              Password is required!
            </mat-error>
          </mat-form-field>
        </div>
        <br/>
        <button mat-raised-button color="primary" matStepperNext>Next</button>
      </form>
    </div>
  </mat-step>

  <mat-step [stepControl]="formEmailGroup" label="Email">
    <div style="padding-top: 3%;">
      <form [formGroup]="formEmailGroup">
        <!-- <ng-template matStepLabel>Name</ng-template> -->
        <div class="example-form">
          <mat-form-field class="example-full-width">
            <input type="text" matInput placeholder="Email" required formControlName="emailID">
            <mat-error *ngIf="formEmailGroup.controls['emailID'].hasError('required')">
              Email is required!
            </mat-error>
            <mat-error *ngIf="formEmailGroup.controls['emailID'].hasError('email')">
              Email is not Valid!
            </mat-error>
          </mat-form-field>
        </div>
        <br/>
        <button mat-raised-button color="primary" matStepperNext>Next</button>
      </form>
    </div>
  </mat-step>

  <mat-step [stepControl]="formPhoneGroup" label="Mobile">
    <div style="padding-top: 3%;">
      <form [formGroup]="formPhoneGroup">
        <!-- <ng-template matStepLabel>Name</ng-template> -->
        <div class="example-form">
          <mat-form-field class="example-full-width">
            <input type="tel" matInput placeholder="Mobile" required formControlName="mobile">
            <mat-error *ngIf="formPhoneGroup.controls['mobile'].hasError('required')">
              Mobile is required!
            </mat-error>
            <mat-error *ngIf="formPhoneGroup.controls['mobile'].hasError('min')">
              Mobile No is Wrong!
            </mat-error>
          </mat-form-field>
        </div>
        <br/>
        <button mat-raised-button color="primary" matStepperNext>Next</button>
      </form>
    </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Review</ng-template>
    <h5>You are now done.</h5>
    <div>
      <button mat-raised-button color="primary" matStepperPrevious>Back</button> &nbsp; &nbsp;
      <button mat-raised-button color="accent" type="submit">Submit</button> &nbsp; &nbsp;
      <button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
  <!-- <ng-template matStepperIcon="phone">
    <mat-icon>phone</mat-icon>
</ng-template> -->

</mat-horizontal-stepper>

​

我用的是物料步进机。

我弄糊涂了，因为有不止一个表单和表单组。如何使用提交按钮将所有数据发布到数据库中？

谢谢

Answer 1

如果我没记错的话，您可以使用单一表单来完成所有这些操作：

this.form = this.fb.group({
      userName: ['', Validators.required],
      passWord: ['', Validators.required],
      emailID: ['', Validators.compose([Validators.required, Validators.email])],
      mobile: ['', Validators.compose([Validators.required, Validators.min(10)])]
})

如果要使用单独的表单，可以在提交时访问表单值，如下所示：

this.userName: this.form.get('userName').value

之后，您可以将值(例如，this.userName)发送到您的后端。