См. Членов FormBuilder в строго типизированном списке в Angular 8

Question

Мы пытаемся ссылаться на Formcontrols в Formbuilder строго типизированным способом. В настоящее время у вас есть Formbuilder с более чем 20 полями, и вам нужно отключить валидаторы и видимость, et c. Вместо того, чтобы иметь несколько логических флагов для каждого, мы хотим предоставить массив, который покажет, какие формы нужно отключить. Мы применяем formbuilder, а не formarrays из-за сложных стилей.

Включение / выключение нескольких полей в Formbuilder, чистый синтаксис в Angular?

Найден способ для формульного управления строгого типа в FormBuilder, теперь мы хотим обеспечить сильный ввод массива, чтобы [firstNameControl, cityControl] отключал эти поля. Смотри ответ Элизио сверху.

** Есть ли тип массива, который я могу объявить, чтобы убедиться, что он является членом 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();
}

этот вопрос показал, что для создания контролов форм строго типизированным способом, теперь нужно чтобы поместить их в массив,

Обратитесь к членам FormBuilder безопасным способом, а не к строкам в Angular 8

Попытка решения:

пытаясь сделать что-то наподобие

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

, оно берет управление только у customerForm, не уверен или придется применять перечисления?

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

Надеюсь, это поможет.