反应式表单名称唯一验证器

Question

我正在 Angular 6 中做一个 web 应用程序，我正在使用 Reactive Form。我有一个name字段，我想验证它是否唯一。我正在将其值与数组进行比较。

companies: Company[];

this.companyFormGroup = this.fb.group({
      name: [null, Validators.required],
      emailAddress: [null, Validators.compose([Validators.required, Validators.email])]
    }, {validator: this.uniqueValidator});

uniqueValidator(control: AbstractControl) {
    const name = control.get('name').value;

    if (control.get('name').valid) {
      const isNameUnique = this.companies.map(company => company.name).some(value => value === name);

      if (!isNameUnique) {
        console.log(isNameUnique);
        control.get('name').setErrors({unavailable: true});
      }
    }
  }

无法读取在 push../src/app/modules/create-company/create-company.component.ts.CreateCompanyComponent.uniqueValidator (create-company.component.ts:79) at forms.js 处未定义的属性“公司”： 602 at Array.map () at _executeValidators (forms.js:602) at FormGroup.validator (forms.js:567)

我的目标是在用户输入的名称已经存在时显示错误，如果名称是唯一的，则删除错误。

Answer 1

从 FormControl/FormBuilder 中调用时，验证器方法中的上下文未引用当前组件。这就是thisundefined的原因。

您可以通过使用bind绑定this到验证器来设置上下文来解决此问题：

validator: this.uniqueValidator.bind(this)

您可以通过this在应用绑定之前和之后打印来测试它：

uniqueValidator(control: AbstractControl) {
    const name = control.get('name').value;
    console.log(this)
     /*
    if (control.get('name').valid) {
      const isNameUnique = this.companies.map(company => company.name).some(value => value === name);

      if (!isNameUnique) {
        console.log(isNameUnique);
        control.get('name').setErrors({unavailable: true});
      }
    }*/
  }