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

Question

У нас есть Formbuilder с несколькими полями. Иногда требования хотят переключать определенные поля. Мы можем отключить их с помощью операторов проверки If и использовать NgIf в html. Есть ли простой способ переключать несколько полей в форме из 20 полей и упрощать синтаксис?

Возможно ли это с помощью Formbuilders, или нам нужно перенести в массив формы? Синтаксис ниже кажется повторяющимся, любопытно, как его можно упростить,

В настоящее время имеется около 20 полей флагов.

{
this.customerForm = this.formBuilder.group({
  'firstName': [null, [Validators.maxLength(50), PhoneNumberValidator]],
  'phoneNumber': [null, [Validators.maxLength(50), PhoneNumberValidator]],
  'streetName': [null, [Validators.maxLength(50), PhoneNumberValidator]],

  'emailAddress': [null, [Validators.maxLength(50), Validators.email]],
  'city': [null, [Validators.required, Validators.maxLength(200)]],
  'state': [null, [Validators.maxLength(200)]],
  'zip':[null,[Validators.maxLength(200)]]
});

}

ngOnInit() { 
// this syntax seems repetitive, how to simplify along with NgIf in html?

if (this.firstNameFlag == false) {
  this.customerForm.get('firstName').clearValidators();
  this.customerForm.get('firstName').updateValueAndValidity();
} 

if (this.phoneNumberFlag == false) {
  this.customerForm.get('phoneNumber').clearValidators();
  this.customerForm.get('phoneNumber').updateValueAndValidity();
}
if (this.streetNameFlag == false) {
  this.customerForm.get('streetName').clearValidators();
  this.customerForm.get('streetName').updateValueAndValidity();
}
etc

Answer 1

Artportrait, я ненавижу ясно и установить валидаторы. FormControl недействителен, если он недопустим и включен, поэтому я думаю, что лучше отключить или нет

Для отключения FormControl мы можем использовать директиву - недопустимо при использовании [disabled]="variable" - см. SO ответ

Во избежание 20 полей флага вы можете использовать простой массив. Если ваш массив, например,

fields=['firstName','streetName','state','zip']

Ваши элементы управления в форме могут быть (обратите внимание, что вы не используете * ngIf иначе display.none)

<ng-container [style.display]="fields.indexOf('firstName')<0?'none':''"> 
  first name : 
  <input formControlName='firstName'   
      [enabledControl]="fields.indexOf('firstName')>=0?'>
</ng-container>

Другой подход действительно каждый раз создайте новую группу formGroup. Используя тот же массив, мы можем иметь функцию createForm

createForm(fields)
{
   const form=new FormGroup({});
   if (fields.indexOf('firstName')>=0)
     form.addControl('firstName',new FormControl('', [Validators.maxLength(50), PhoneNumberValidator]]
   if (fields.indexOf('phoneNumber')>=0)
     form.addControl('phoneNumber',new FormControl('', [Validators.maxLength(50), PhoneNumberValidator]]
   ....
   return form
}

И наши входные данные, такие как

<ng-container *ngIf="fields.indexOf('firstName')>=0" 
  first name : 
  <input formControlName='firstName'>
</ng-container>

, другой подход - это создание динамических c форм, как, например, Ploch ie, но это подход, который добавляет в приложение комплекс, который нам нужно оценить (в документах у вас есть способ сделать это)