angular - 将索引传递给 FormArray 控件验证器

Question

我有一个带有简单输入的 FormArray。我想将 FormArray 中的输入索引传递给验证器函数(自定义)，因为我的验证器是基于它的。例如，我希望后面的每个 AbstractControl 的字母都比前面的多(这只是一个例子，传递索引才是我真正需要实现的)。

我的意思是如果我能得到这样的东西

ngOnInit(): void {
    this.items = this.items?.length ? this.items : this.getDefaults(this.size)

    const inputs: FormArray = this.formGroup.get('inputs') as FormArray
        for (let item of this.items) {
            inputs.push(this.fb.control(
            item.value,
            this.validator(),
            this.asyncValidator(),
            ))
        }
}

private validator(): ValidatorFn {
    return (abstractControl: AbstractControl/*, indexInArray */) => {
        // const lenOfPrev = this.items[indexInArray - 1].value.length
        if (abstractControl.value.length <= 0 /* lenOfPrev */) {
            return {
                notLargeEnough: 'should be bigger'
            }
        }
        return null
    }
}

Answer 1

只需向函数验证器添加和参数

private validator(indexInArray:number): ValidatorFn { //<--here
    return (abstractControl: AbstractControl) => {
      //you can use indexInArray here
     if (indexInArray==0)  //For the first give always valid
         return null; 
      //I change this.items by this.form.value
      const lenOfPrev = this.form.value[indexInArray - 1].value.length
      if (abstractControl.value.length <= lenOfPrev.length) {
        return {
          notLargeEnough: 'should be bigger'
        }
      }
      return null
    }
  }

但是，如果您使用组件的值，则需要“绑定(bind)”验证器

this.items.forEach((item, i) => {
      const previousControl = i > 0 ? inputs.controls[i - 1] : null;      
      inputs.push(this.fb.control(
        item.value,
        this.validator(i).bind(this), //<--see the argument and the "bind"
        this.asyncValidator(),
      ));
    }); 

但是，对不起。这种方法有一个相关的错误，如果你改变会发生什么，例如从“aaa”到“aaaaa”的第二个输入？如果您的第三个输入是“bbbb”，则之前有效，但更改之后无效。但是 angualr 可以考虑到这一点，因为第三个输入没有改变。所以，为什么不对所有 formArray 使用验证器。作为自定义验证器返回一个对象，您可以返回，例如一个数组 [false,false,true,false] 并询问这个值

  private validatorArray()
  {
    return (formArray:FormArray)=>{
      if (!formArray.value)
        return null;
      const result= (formArray.value.map((x:any,i:number)=>{
        if (i==0)
           return false;
        return (x.length<=formArray.value[i-1].length)
      }))
      return result.find(x=>x)?{error:result}:null;
    }
  }

在 form.errors?.error[i] 中，如果控件无效

您可以在this stackblitz 中看到这两个方法

注意:我直接用了一个FormControls的formArray，其实是一样的

更新 在阅读了 Kurt 的回答后，确实不需要在验证器中 bind(this) ，只需像 Kurt 所说的那样传递先前的控制。