在 FormArray 中复制多个字段

Question

我需要验证嵌套的 FormArray 内没有重复项，并且我无法集中精力解决该解决方案我可以使用

RxwebValidators

和

unique

对 FormArray 内的单个字段进行验证，但我惨败如果我需要验证表单数组中的多个字段，请查找该怎么做。

我有以下 StackBlits，基于另一个示例，我希望技能部分中没有重复的行，任何帮助将不胜感激。

https://stackblitz.com/edit/unique-value-validation-in-formarray-reactive-for-lepdkv?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Answer 1

您应该使用角度表单验证器。每当正在设置的控件上的值发生变化时，验证器就会触发。在您的情况下，您需要将其添加到

skills

formArray 中，以便每当其上发生任何更改时都会执行验证器来检查有效性。

      skills: this.formBuilder.array([this.getSkillFormGroup()], {
        validators: [
          (formArr: FormArray) => {
            const met = new Set<string>();
            return formArr.controls.some(({ value: { skillName, skull } }) => {
              const val = `${skillName}__|__${skull}`;
              if (met.has(val)) return true;
              met.add(val);
              return false;
            })
              ? { hasDuplicates: true }
              : null;
          },
        ],
      }),

如果您不需要突出显示重复的确切行，则此实现会很好地工作。如果您需要显示“某些内容重复”的一般验证错误

结果：https://stackblitz.com/edit/unique-value-validation-in-formarray-reactive-for-qmtsvk?file=src%2Fapp%2Fapp.component.ts

如果您需要在确切的行上显示错误，那么您需要在每个技能表单组上添加验证器，该验证器将遍历表单数组并检查更改的行是否发现任何重复，如果有，则还需要调用 updateValueAndValidity在该重复项上使两行都标记为无效。这是一个更棘手的解决方案，但取决于您想要如何显示用户无效状态的需求