如何在 Angular 的 ReactiveFormsModule 中压缩定义验证者和验证器列表的代码？

Question

我有基于 ReactiveFormsModule 的表单验证，如下所示。实际上，有更多的验证者并且每个验证者的列表更长（尽管每个基本相同）。

constructor(private builder: FormBuilder) {
  this.form = builder.group({
    "firstName": ["", [Validators.required, Validators.minLength(3)]],
    "lastName": ["", [Validators.required, Validators.minLength(3)]]
  });
}

它太冗长了，这让我很困扰，我想知道是否有一种巧妙的方法可以将所有验证器粉碎在一起，并以某种方式让它成为一个单一的实例。

Answer 1

如果您的字段确实有相同的验证器，您可以只使用一个数组作为您的键并像这样减少它：

const fields=["firstName","lastName"]
let myGroup = fields.reduce((group,field)=>{
  return group[field]=["",[Validators.required,Validators.minLength(3)]]
},{} as {[k:string]:any});

this.form = builder.group(myGroup);

如果某些字段有不同的验证器，您甚至可以在之后设置：

this.form.get("myField").setValidators([someValidator]);

但请注意，恕我直言，您失去了可读性。

Answer 2

在我看来，您有两个方面的麻烦 - 要验证的字段集（垂直大小）和验证集（水平大小）？虽然 @n00dl3 讨论（并批评）两个维度的切割，但我强烈建议您只在后者（即水平方向）上工作。

constructor(private builder: FormBuilder) {
  const validation = [Validators.required, Validators.minLength(3)];
  this.form = builder.group({
    "firstName": ["", validation],
    "lastName": ["", validation]
  });
}

此外，我怀疑您会达到需要参数化验证的地步。在这种情况下，您可能会考虑切换到一个可以进行适当验证的函数。

constructor(private builder: FormBuilder) {
  this.form = builder.group({
    "firstName": ["", validation(1)],
    "lastName": ["", validation(2)]
  });
}

validation(type: number) : Validations {
  if(type === 1)
    return [Validations.required];
  return [Validators.required, Validators.minLength(3)];
}

如何在 Angular 的 ReactiveFormsModule 中压缩定义验证者和验证器列表的代码？

How can I compact the code defining the list of validatees and validators in ReactiveFormsModule of Angular?

forms

angular

validation

typescript

angular-forms