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});
      }
    }
  }

无法读取未定义的属性“ companies” 在push ../ src / app / modules / create-company / create-company.component.ts.CreateCompanyComponent.uniqueValidator （create-company.component.ts：79）在forms.js：602 在Array.map（）在_executeValidators（forms.js：602）在FormGroup.validator（forms.js：567）

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

Answer 1

从FormControl / FormBuilder中调用时，验证器方法中的

上下文未引用当前组件。这就是this不确定的原因。

您可以通过使用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});
      }
    }*/
  }

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

1 个答案: