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

问题描述

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

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中实现强类型formcontrol的方法，现在我们想提供一个强大的数组输入，以便[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
    })
  }
}

尝试避免使用这种语法，

Trying to avoid this syntax,

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

我希望这会有所帮助.

I hope this helps.

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