Refer to FormBuilder Members in a Strongly Typed list in Angular 8

问题

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.

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

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.

** 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,

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

Attempted Solution:

trying to do something like

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

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

回答1:

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);

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.

来源：https://stackoverflow.com/questions/59727651/refer-to-formbuilder-members-in-a-strongly-typed-list-in-angular-8