如何在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)];
}