请参阅 Angular 8 中强类型列表中的 FormBuilder 成员

Posted 2023-03-13

【中文标题】请参阅 Angular 8 中强类型列表中的 FormBuilder 成员

【英文标题】：Refer to FormBuilder Members in a Strongly Typed list in Angular 8

【发布时间】：2020-04-30 19:37:08

【问题描述】：

我们试图以强类型的方式在 Formbuilder 中引用 Formcontrols。 目前有一个包含 20 多个字段的 Formbuilder，并且需要关闭验证器和可见性等。我们希望提供一个数组来显示要关闭哪些表单，而不是每个都有多个布尔标志。由于样式复杂的原因，我们正在应用表单构建器，而不是表单数组。

Toggle Multiple Fields On/Off in Formbuilder, clean syntax in Angular?

找到了一种在 FormBuilder 中强类型表单控件的方法， 现在我们要提供一个强大的数组输入，因此 [firstNameControl, cityControl] 将关闭这些字段。 请参阅上面的 Elisio 答案。

** 是否有一个数组类型，我可以声明它以确保它是下面的 FormBuilder 的成员？ （firstNameControl、lastNameControl、cityControl、stateControl、zipControl）

export class CustomerTestClass 
  public customerFormBuilder: FormBuilder = new FormBuilder();
  public customerForm: FormGroup;

  public firstNameControl: FormControl;
  public lastNameControl: FormControl;
  public cityControl: FormControl;
  public zipCodeControl: FormControl;
  public phoneNumberControl: FormControl;

  public constructor(
  ) 
    this.firstNameControl = this.customerFormBuilder.control(null, [Validators.required, Validators.maxLength(50)]);
    this.lastNameControl = this.customerFormBuilder.control(null, [Validators.required, Validators.maxLength(50)]);
    this.cityControl = this.customerFormBuilder.control(null, [Validators.required, Validators.maxLength(20)]);
    this.zipCodeControl = this.customerFormBuilder.control(null, [Validators.maxLength(5)]);
    this.phoneNumberControl = this.customerFormBuilder.control(null, [Validators.maxLength(10)]);

    this.customerForm = this.customerFormBuilder.group(
      'firstName': this.firstNameControl,
      'lastName': this.lastNameControl,
      'city': this.cityControl,
      'zipCode': this.zipCodeControl,
      'phoneNumber': this.phoneNumberControl
    )
  

尽量避免这种语法，

if (this.firstNameFlag == false) 
  this.firstNameControl.clearValidators();
  this.firstNameControl.updateValueAndValidity();
 

if (this.phoneNumberFlag == false) 
  this.phoneNumberControl.clearValidators();
  this.phoneNumberControl.updateValueAndValidity();

if (this.streetNameFlag == false) 
  this.streetNameControl.clearValidators();
  this.streetNameControl.updateValueAndValidity();

这个问题展示了以强类型的方式创建表单控件，现在需要将它们放在数组中，

Refer to FormBuilder Members in a Strongly Type safe way, instead of strings in Angular 8

尝试的解决方案：

尝试做类似的事情

public test[]:  this.customerTestClass.customerForm.controls[];  

它只接受来自 customerForm 的控制，不确定 还是必须应用枚举？

【参考方案1】：

我不知道我是否 100% 理解了这个问题，但我确实遇到了 FormBuilder 没有被强类型化的问题。在这里发布我的解决方案（只是示例代码）以防万一：

type FormConfig<T> = 
[K in keyof Required<T>]:
    | [
            T[K] | '',
            (ValidatorFn | ValidatorFn[] | ValidationErrors)?,
            (AsyncValidatorFn | AsyncValidatorFn[] | ValidationErrors)?,
            AbstractControlOptions?
      ]
    | AbstractControl;
;

const customerFormConfig: FormConfig<Customer> = 
    name: ['', Validators.required],
    emailAddress: ['', Validators.email],


form = this.formBuilder.group(customerFormConfig);

这里的技巧是，如果 Customer 类中的任何属性发生变化，那么 customerFormConfig 将引发构建错误，直到您更新“formConfig”。

我希望这会有所帮助。

【讨论】：

谢谢，这里有类似的问题***.com/questions/59742095/…