0

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

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

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

4

2 回答 2

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]);

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

于 2017-08-24T15:56:15.573 回答
0

我看到的方式，你有两个维度的麻烦 - 要验证的字段集（垂直大小）和验证集（水平大小）？虽然@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)];
}
于 2017-08-24T20:28:48.217 回答