在 Formbuilder 中打开/关闭多个字段，在 Angular 中清理语法? [英] Toggle Multiple Fields On/Off in Formbuilder, clean syntax in Angular?

问题描述

我们有一个包含多个字段的 Formbuilder.有时，需求想要切换某些字段.我们可以使用 If 语句验证器关闭它们，并在 html 中使用 NgIf.有没有一种简单的方法可以在 20 个字段的表单上切换多个字段并简化语法?

We have a Formbuilder with multiple fields. Sometimes, requirements want to toggle certain fields. We can turn them off with If statements validators, and use NgIf in the html. Is there an easy way to toggle multiple fields on a 20 field form, and simplify the syntax?

Formbuilders 是否可以，或者我们必须转移到表单数组?下面的语法似乎重复，很好奇如何简化，

Is it possible with Formbuilders, or do we have to transfer to form array? Syntax below seems repetitive, curious how it can be simplified,

目前，大约有 20 个标志字段.

Currently, have around 20 flag fields.

{
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

推荐答案

Artportrait，我讨厌 clear 和 set 验证器.如果一个 FormControl 无效并且启用，则它是无效的，所以我认为最好禁用它

Artportrait, I hate clear and set validators. A FormControl is invalid if is invalid and is enabled, so I think it's better disabled or not

对于禁用的 formControl，我们可以使用指令 -not is valid using [disabled]="variable"-，请参阅此 SO 答案

For disabled a formControl we can use a directive -not is valid using [disabled]="variable"-, see this SO answer

为了避免 20 个标志字段，您可以使用一个简单的数组.如果您的数组是，例如

For avoid 20 flag fields you can use a simple array. If your array is, e.g.

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

你在表单中的控件可以(看你不要用*ngIf else display.none)

Yours controls in the form can be (see that you don't use *ngIf else 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

Another aproach is really create a different formGroup each time. Using the same array we can has a function 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>

另一种方法是像 Plochie 所说的那样创建动态表单，但是这种方法会向我们需要评估的应用程序添加复杂的内容(在 文档 你有办法做到)

the other aproach is create dynamic forms as Plochie say, but is an aproach that add a complex to the app that we need evaluate (in the docs you has a way to do it)

这篇关于在 Formbuilder 中打开/关闭多个字段，在 Angular 中清理语法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！