Angular 6 Reactive Forms自定义验证器错误从其OWN数据中显示-Java 学习之路

我在FormGroup中有一个FormArray，每个FormArray都有多个FormGroup，可以动态添加它们 .

我有一个自定义验证器，它检查每个FormArray中的所有数据，以验证数据的重复 . There's an issue with it, the single FormGroup in FormArray is comparing it to all the data in the FormArray and is returning True since the FormGroup exists inside of the FormArray

StackBlits链接：https://stackblitz.com/edit/angular-custom-validator-defaultdata

问题步骤： Click on Additional Assignment => Select Position, Department and Location same as the previous row. => You'll see the error, "Same Job data " => Now change the value of the Position to something else => No Error => Change the value in the Pay Rate input => You see the error, "Same Job data " > Because it's comparing the changed row to the data from the Form Data which will definitely return True.

在检查自己的数据时，有没有办法限制错误抛出自己 .

我只检查位置，部门和位置之间的相似性 .

for (let assign of this.additionalAssign) {
      const fg = new FormGroup({
        "payRate": new FormControl(assign.jobRate, Validators.required),
        "position": new FormControl(assign.position, Validators.required),
        "location": new FormControl(assign.location, Validators.required),
        "department": new FormControl(assign.department, Validators.required)
      }); 
      fg.validator = this.jobDataValidator.bind(this);
      this.addPay.push(fg);
    }

验证器：

jobDataValidator(control: FormControl): {[s: string]: boolean} {
    let value = this.getJobLocDeptValidity(control);
    if(value.length > 0 && control.dirty){
      return {'sameJobData': true};
    }
    return null;
  }

  getJobLocDeptValidity(control: FormControl):any[] {
    let additionalAssignments = this.additionalAssignmentsForm.value.payArray;
    let test = additionalAssignments.filter(item =>  !!control.value.position && item.position === control.value.position && !!control.value.department && item.department === control.value.department && !!control.value.location && item.location === control.value.location);
    return test;
  }

图1：与前一个（第二个）相同的新行（第三个）数据=>显示错误
Same data as previous one

图2：更改位置选择值，错误消失
Position changed and Error Disappears

图3：在付费率输入中输入一些数字，然后再次显示错误 .
Input payrate changes and Error Appears

3 回答

1
我已经分叉了您的示例应用程序并对代码进行了一些小的更改 . 现在它按预期工作了 . 请参阅stackblitz .

我做了三个更改，如下所示：
- 您在行级别上没有任何uniqueid，我已添加为 'this.addPay' 长度的索引 . 见行号：57和75 .
  在 'getJobLocDeptValidity' 方法中
- 应用条件来检查当前控件的索引和过滤器索引不应该相同并做了一些其他更改 .
以下是getJobLocDepValidity的代码更改 .
```
getJobLocDeptValidity(control: FormControl):any[] {
    let additionalAssignments = this.additionalAssignmentsForm.value.payArray;
    let test = additionalAssignments.filter(item => {
if(control.value.index != item.index){
return (item.payRate == control.value.payRate && item.position == control.value.position && item.department == control.value.department && item.location == control.value.location)
}
return false;
    } );
    return test;
  }
```
@Sunil我建议，请在给出您的输入之前尝试给出正确答案并进行测试，这样有人可以轻松实现而无需任何错误的代码 .
回复于 2024-04-27T05:00:27+08:00

除检查条件外，您的实现看起来很完美 . 由于您没有任何行的唯一ID，因此如果记录是现有记录，则难以匹配 .

但是你很幸运能够引用所有必需的对象 . 您可以检查对象是否匹配 .

只需在验证部分添加一个条件

control !== item

以下是更改的代码 -

getJobLocDeptValidity(control: FormControl):any[] {

    let additionalAssignments = this.additionalAssignmentsForm.value.payArray;
    let test = additionalAssignments.filter(item =>  
    control !== item && !!control.value.position && item.position === control.value.position && !!control.value.department && item.department === control.value.department && !!control.value.location && item.location === control.value.location);
    return test;
  }

更新

由于您有 index 并根据您的评论，以下检查工作 .

control.index !== item.i

回复于 2024-04-27T05:00:27+08:00

您可以尝试从验证器中排除payRate值，如下所示：

jobDataValidator(control: FormControl): {[s: string]: boolean} {
    let value = this.getJobLocDeptValidity(control);
    if(value.length > 0 && control.dirty  && !control.value.payRate){
      return {'sameJobData': true};
    }
    return null;
  }

回复于 2024-04-27T05:00:27+08:00

Angular 6 Reactive Forms自定义验证器错误从其OWN数据中显示

3 回答

更新

相关问题