Question

我的SPA上有一个大表格（person.firstName，lastName，DOB，性别，公民身份等）。我需要将此表单的每个部分（按其作用域分组）发送到后端，以进行业务逻辑验证。

例如：当firstName和lastName为touched和valid，并且表单的其他部分为pristine或valid时，发送完整的表单。并将相同的方法应用于其他小组。

<form [formGroup]="fmdForm" novalidate>
        <div class="form-row">
          <div class="col">
            <label for="prefix">Prefix</label>
            <select formControlName="party.prefix" id="prefix" >
              <option [value]="availablePrefix" *ngFor="let availablePrefix of availablePrefixes">{{availablePrefix}}
              </option>
            </select>
          </div>

          <div class="col">
            <label for="firstName">First Name<span style="color: red"> *</span> </label>
            <input formControlName="party.firstName" type="text" autocomplete="off" id="firstName"/>
          </div>

          <div class="col">
            <label for="middleName">Middle Name</label>
            <input formControlName="party.middleName" type="text" autocomplete="off" id="middleName" maxlength="1" />
          </div>

          <div class="col">
            <label for="lastName">Last Name<span style="color: red"> *</span> </label>
            <input formControlName="party.lastName" type="text" autocomplete="off" id="lastName"/>
          </div>

          <div class="col">
            <label for="suffix">Suffix</label>
            <select formControlName="party.suffix" id="suffix">
              <option [value]="availableSuffix" *ngFor="let availableSuffix of availableSuffixes">{{availableSuffix}}
              </option>
            </select>
          </div>
        </div>
      </form>

这是我表单的一个小示例，应提交prefix, firstName，middleName，lastName, suffix组。

感谢您的帮助

更新：

我的问题是我如何观察整个表格的变化并从观察中得到两件事：

formControl及其当前状态
已处理formControl的当前值

Answer 1

由于尚不清楚您到底想要什么（嗯，实际上看起来您想让别人为您编写代码），因此我只能提供很多指导。您可以使用... Observables订阅表单上的更改。它们是跟踪后台发生的变化的强大工具。可能看起来像这样...

plt.rcParams['title_fontsize'] = 16

就我而言，我想检查一下动态生成的选择框包含哪些选项。所以我将它们存储在一个数组中，所以我总是可以筛选可用的选项，因为每个选择只需要选择一次。

当然，就表格而言，您可以做很多事情。当然，您也可以跟踪每个字段的当前状态。

https://angular.io/guide/forms

虽然我不参考所有问题的官方文档，但表格中的解释却很好。

Angular 6 http请求大格式的一部分

1 个答案: