Anuglar材料步进器 - 读取数据 [英] Anuglar material stepper - read data

问题描述

当有一个具有大量不同字段的材质步进器时，用户的读取输入的最佳方式是什么？



这是代码的一部分，因为它是有点大，但只是想一个主意：

what is the best way the read input from user when one have a material stepper with lots of different fields?

the is part of the code as it is a little bit huge but just to take an idea:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <!--Merchant Resource-->
  <mat-step [stepControl]="merchantResource">
    <form [formGroup]="merchantResource">
      <ng-template matStepLabel>Merchant Resource</ng-template>

      <div class="example-container">


        <table class="merchant-resource-table" cellspacing="0">
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput  id="merchantName" placeholder="Merchant Name" formControlName="merchantResourceCtrl" required>
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput placeholder="Trade Name" formControlName="merchantResourceCtrl" required>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput type="number" placeholder="Registration Number" formControlName="merchantResourceCtrl"
                  required>
              </mat-form-field>
            </td>

我尝试过：



i不知道是否有办法将它们按步骤分组，我试图通过互联网浏览但是找不到任何东西..还是请帮忙吗？

What I have tried:

i dont know if there is a way to group them per step or not , i tried to surf through internet but cannot find anything .. anyhelp please ?

推荐答案

执行此操作的常规方法是将每个mat-step分隔为自己的formgroup。

The normal way to do this would be to separate each mat-step out into its own formgroup.

<mat-step [stepControl]="myForm1">
  <form [formGroup]="myForm1">
    <mat-form-field ....

  </form>
</mat-step>
<mat-step [stepControl]="myForm2">
  <form [formGroup]="myForm2">
    <mat-form-field ....

  </form>
</mat-step>
<mat-step [stepControl]="myForm3">
  <form [formGroup]="myForm3">
    <mat-form-field ....

  </form>
</mat-step>

这篇关于Anuglar材料步进器 - 读取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！