当检查数组中的重复值时，它显示未定义

Question

当我在角色中保存重复值时显示重复数据输入错误，但我没有显示。 This image shows when I press any value in the text box it shows my console can not read properly roles of undefined

Role.component.ts

export class RoleCreateComponent implements OnInit {

 roles: Role[] = [];

constructor(  private roleStorageService: RoleStorageService,
              private fb: FormBuilder) {
    this.roles = this.roleService.getRoles();
    if (this.roles.length === 0) {
      this.roleStorageService.getRolesFromServer().subscribe();
    }
  }

  validacija(control: FormControl) {
    for (let i = 0; i < this.roles.length; i++) {
      if (this.roles[i].name === control.value) {
        alert('The name already exist')
    }
  }
}
  ngOnInit(): void {
    this.roleForm = this.fb.group({
      id: [null],
      name: [null, [Validators.required], [this.validacija]],
    });
  }
}

Role.component.html

    <nz-form-item>
      <nz-form-label [nzSpan]="null" nzRequired> Name</nz-form-label>
      <nz-form-control nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="roleErrorTpl">
        <input nz-input formControlName="name" placeholder="Role Name" />
        <ng-template #roleErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            Please input  name!
          </ng-container>
           <ng-container *ngIf="control.hasError('duplicated')">
            The Role is redundant!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </form>

Answer 1

看看Function Context。

您应该使用箭头函数来保持 this 引用您的组件实例。

// ...
name: [null, [Validators.required], [ctrl => this.validacija(ctrl)]],
// ...

顺便说一句，验证者应该 return 一个 ValidationErrors 或 null。例如：

// inside a validator function...
if (isValid) {
  return null;
}
return { duplicated: 'The name already exist' };
// ...

您可以找到有关自定义验证器的更多信息here

当检查数组中的重复值时，它显示未定义

when check Duplicate value in array it shows undefine

angular

angular-cli

ng-zorro-antd