在 Angular 中切换和关闭验证器的良好做法？

Question

我们在下面有一个 Angular 表单。出现了一个新要求，即有些人只想使用以下 10 个字段中的一些字段。所以我们的团队正在做的是：隐藏字段，并在下面的 typescript 表单和 html 中切换验证器。

问题是，这是 Angular 中的好习惯吗？我的想法是有新的表单构建器模型，可以换入和换出组件。似乎关闭验证器和 html 会留下不必要的代码，并进一步纠缠代码。如果我们创建新字段并添加切换会发生什么。现在，我们所有的 10 个字段都有切换，而且看起来越来越乱了。

只是好奇这是否是 Angular 官方文档推荐中的标准做法？

如果没关系，有没有更好的方法来管理而不是为 10 个表单控件设置 10 个布尔变量？

this.customerForm = this.formBuilder.group({
  'customerName': [null, [Validators.maxLength(50)]],
  'productBought': [null, [Validators.maxLength(50)]],
  'streetNumber': [null, [Validators.required, Validators.maxLength(64)]],
  'streetName': [null, [Validators.maxLength(8)]],
  'city': [null, [Validators.maxLength(32)]],
  'state': [null, [Validators.maxLength(16)]],
  'postalCode': [null, [Validators.maxLength(16)]],
  'postalCodeExtension': [null, [Validators.maxLength(50)]]
 }, 
}


'city': [null, this.cityShow === true ? [Validators.required, Validators.maxLength(50)] : []],


<div class="parent" *ngIf="cityShow">
    City:
     <input formControlName = "city" class = "cityclass"> 
     </input>
</div>

Answer 1

我认为创建不同的形式更合适。您可以在数组中包含必要的字段并使用 addControl

例如

controls=['customerName','streetNumber','postalCode' ]
this.customerForm = new FormGroup({})
if (controls.indexOf('customerName')>=0)
   this.customerForm.addControl('customerName',new FormControl(null,Validators.maxLength(50))
if (controls.indexOf('productBought')>=0)
   this.customerForm.addControl('productBought',new FormControl(null,Validators.maxLength(50))
if (controls.indexOf('streetName')>=0)
   this.customerForm.addControl('streetName',new FormControl(null,Validators.maxLength(8))
...

}

//In .html
<div *ngIf="controls.indexOf('customerName')>
   Customer :
   <input formControlName="customerName">
   ...
</div>