在Formbuilder中打开/关闭多个字段，在Angular中使用干净的语法？

Posted 2023-03-13

【中文标题】在Formbuilder中打开/关闭多个字段，在Angular中使用干净的语法？

【英文标题】：Toggle Multiple Fields On/Off in Formbuilder, clean syntax in Angular?

【发布时间】：2020-04-29 07:24:57

【问题描述】：

我们有一个包含多个字段的表单构建器。有时，需求想要切换某些字段。我们可以使用 If 语句验证器关闭它们，并在 html 中使用 NgIf。有没有一种简单的方法可以在 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

【问题讨论】：

你能举个例子吗？我之前读到过，不知道如何在这里申请

【参考方案1】：

Artportrait，我讨厌 clear 和 set 验证器。如果 FormControl 无效且已启用，则 FormControl 无效，因此我认为最好禁用或不禁用

对于禁用的 formControl，我们可以使用指令 - 使用 [disabled]="variable"- 无效，请参阅此 SO answer

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

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

表单中的控件可以是（请注意不要使用 *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

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 所说，但它是一种向我们需要评估的应用程序添加复杂的方法（在 docs 中，您有办法做到这一点）

【讨论】：

嗨@Elisio，你也能回答这个问题吗？答案的 b 部分不起作用，也许你可以改进它？谢谢***.com/questions/59505578/…

我将使用您提到的禁用数组，这一行试图理解“您的表单中的控件可以（请参阅您不使用 *ngIf else display.none）”，是你说没有办法用 ngcontainer 包装每个表单输入？我有 20 个字段（我将不得不用这个包装），如果没有，那很好，无论如何你的答案真的很有帮助，使用 ngIf 并完全删除 dom 元素不是更好，而不是禁用带有样式的视图显示？

对你的回答赞不绝口

如果你使用 *ngIf -with the option of disabled- formControl 不要禁用它。这是使用显示的原因：无。尊重b)部分，谢谢建议，一定要this.editSharedForm.get('addressChangeReason').clearValidators()

我刚转入数组，有人问了，到底有没有强绑定数组参数，和formbuilder表单字段？这样就没有人可以写入错误的值，好奇是否可能，谢谢