Question

我有一个需要编译的表单，如果用户需要，以后可以对其进行编辑。实际上，逻辑就是这样工作的：我从服务器中获取Json数据，使用一个接口来帮助我进行Intellisense，然后在我将Json中的所有数据修补为表单值（Reactive Form）之后。所有逻辑都在创建表单的组件内部处理。我是否应该基于表单值创建一个类并解析该类中的Json数据？唯一的问题是该类将是巨大的，因为该表单具有30个字段值。

Answer 1

首先，您应该使用多个类来镜像Json的结构。

这是一个简短的示例：

user.ts：

import { PersonalInformation } from './personal-information';

export class User {
  _id: string;
  email: string;
  createdAt: number;
  updatedAt: number;
  personalInformation: PersonalInformation;
  someOtherInformation: SomeOtherInformation
}

personal-information.ts：

import { Address } from './address';
import { Country } from './country';

export class PersonalInformation {
  avatarUrl?: URL;
  firstName?: string;
  lastName?: string;
  birthDate?:string;
  countryOfResidence?: Country;
  address?: Address;
  phone?: number;
};

并使用相同的逻辑定义每个嵌套对象。

然后，为减轻父组件的复杂性，您可以嵌套子组件并管理其中的某些字段的验证：

parent-component.ts：

let someInformation: SomeInformation = this.sharedService.user.someInformation;

this.parentFormGroup = this.formBuilder.group({
         countryCtrl: someInformation.accountCountry : '', Validators.required],        
         child: this.formBuilder.group({
           accountNumberCtrl: ['', [ Validators.required, Validators.minLength(5)]], >>>> YOU CAN SET VALUES FOR YOUR FORM BY REPLACING ''
           [...]
         }),
         additionalInformationCtrl: [(userBankingInformation) ? userBankingInformation.additionalInformation : '']
    });

parent-component.html：

  <form [formGroup]="parentFormGroup" (ngSubmit)="onSubmit(parentFormGroup)">

    <div>
      <country-search-input [parent]="parentFormGroup" [countries]="countries" [title]="title"></country-search-input>
    [...]
    <div formGroupName="child">
      <account-information [parent]="parentFormGroup.controls.child"></account-information>
    </div>

child-component.ts：

export class ChildComponent {
  @Input()
  parent: FormGroup

  // You can do some of the work here
}

child-component.html：

<div class="some-class-name" [formGroup]="parent">
  <mat-form-field class="some-information-form">
    <input matInput type="text" pattern="[a-zA-Z0-9-]+" placeholder="Account number" formControlName="accountNumberCtrl" required>
  </mat-form-field>
  [...]
</div>

您可以根据需要设计定制验证器并将其放在其他文件中。希望对您有所帮助。祝你好运。

我应该为表单数据创建一个类吗？

1 个答案: