Проверка на дубликаты полей ввода в Angular

Question

Есть ли валидатор для проверки дубликатов полей? как в случае совпадения полей пароля. В демоверсии я пытаюсь выдать сообщение об ошибке, когда exp и skill совпадают для одного примера div, имя - rak фамилия - bhure skill - java exp - java
это должно выдать сообщение об ошибке

Демо

Answer 1

Надеюсь, что фрагмент кода поможет вам:

 onSubmit() {
  let showError=false;
  if (this.empForm.get("employees").value) {
    this.empForm.get("employees").value.forEach(employee => {        
      if (employee) {
        console.log(employee);
        employee.skills.forEach(skill => {
          let findDuplicates = data => {
            let result = [];
            data.forEach(function(element, index) {
              if (data.indexOf(element, index + 1) > -1) {
                if (result.indexOf(element) === -1) {
                  result.push(element);
                }
              } else {
                console.log("Show error");
                showError=true;
              }
            });
            console.log(result);
          };
          const data = findDuplicates(
            employee.skills.map(skill => skill.skill)
          );
        });
      }
    });
    if(showError){
      this.empForm.setErrors({
        'duplicateSkills': true
      });
    }
    console.log(this.empForm.errors)
  }
  const firstEmployeeSkills = this.empForm.value.employees[0].skills.map(
    x => x.skill
  );
  return firstEmployeeSkills;
}

Если есть повторяющиеся навыки, он установит ошибку в форму.

Answer 2

Предлагаю вам прочитать эту документацию о валидаторах в Angular. Для создания пользовательских валидаторов: 1. Определите вашу форму и 2. создайте новый класс; который в этом случае называется AuthValidators, где он содержит все ваши пользовательские валидаторы. Я назвал первый валидатор skillAndExpValidator.

Вы можете не создавать пользовательский класс, а просто создать функцию skillAndExpValidator, но это хорошая практика, чтобы все ваши валидаторы были в одном классе.

x.component .ts

this.form = this.fb.group({
.......
exp: ['', [AuthValidators.skillAndExpValidator()]]
skill: ['', [AuthValidators.skillAndExpValidator()]]
.......
})
....... 
export class AuthValidators {
  static skillAndExpValidator() {
    return (group: FormGroup) => {
      let exp = group.get('exp').value
      let skill = group.get('exp').value

      return exp == skill ? {expEqSkillError: true} : null

   }
}
.......

x.component. html

.......
<span *ngIf="this.fb.get('exp').hasError('expEqSkillError')">ERROR: EXP SHOULDN'T BE EQUAL TO SKILL</span>

<span *ngIf="this.fb.get('skill').hasError('expEqSkillError')">ERROR: EXP SHOULDN'T BE EQUAL TO SKILL</span>
.......