在表单构建器中打开/关闭多个字段，在 Angular 中切换干净的语法?

Question

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

是否可以使用表单生成器，或者我们必须转移到表单数组？下面的语法似乎是重复的，好奇如何简化它，

目前，有大约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 无效并且已启用，则无效，所以我认为最好禁用或不禁用

对于禁用的表单控件，我们可以使用指令 -not 使用[disabled]="variable"有效，请参阅此 SO 答案

为了避免 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>

另一个优点是每次都创建一个不同的表单组。使用相同的数组，我们可以有一个函数 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>

另一个 aproach 是创建动态表单，正如 Plochie 所说，但它是一个向我们需要评估的应用程序添加复杂体的 aproach(在文档中你有办法做到这一点(