在 Angular 8 中的强类型列表中引用 FormBuilder 成员

问题描述

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

We are trying to refer to Formcontrols in a Formbuilder in a strongly typed way.Currently have a Formbuilder with 20+ fields, and need to toggle off validators and visibility, etc. Instead of having multiple boolean flags for each, we want to provide an array, that will show which forms to toggle off. We are applying formbuilder,not formarrays due to styling complicated reasons.

打开/关闭多个字段Formbuilder，Angular 中的简洁语法?

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

Found a way to strong type formcontrols in a FormBuilder,now we want to provide a strong array input so [firstNameControl, cityControl] will toggle off these fields.See Elisio answer from above.

** 是否有一个数组类型，我可以声明它以确保它是下面 FormBuilder 的成员?(firstNameControl, lastNameControl, cityControl, stateControl, zipControl)

** Is there a array type, which I can declare to ensure it is a member of a FormBuilder below? (either 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();
}

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

this question showed to create formcontrols in a strong typed way, now need to place them in array,

参考以强类型安全的方式添加到 FormBuilder 成员，而不是 Angular 8 中的字符串

尝试的解决方案:

尝试做类似的事情

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

它只接受来自 customerForm 的控制，不确定或者必须申请枚举?

it only takes controls from customerForm, not sureor would have to apply enums?

推荐答案

我不知道我是否 100% 理解这个问题，但我确实遇到了 FormBuilder 没有被强类型化的问题.在这里发布我的解决方案(只是示例代码)，以防它有用:

I don't know if I'm understanding the problem 100%, but I did run into the issue of FormBuilder not being strongly typed. Posting my solution (just example code) here in case it's useful:

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".

The trick here is that if any properties change in the Customer class, then customerFormConfig will throw a build error until you update the "formConfig".

我希望这会有所帮助.

这篇关于在 Angular 8 中的强类型列表中引用 FormBuilder 成员的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！