Блог

Я создаю веб-приложение на Angular 6 и использую реактивную форму. У меня есть 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’ из undefined
в 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)

Моя цель — выдать ошибку, если имя, введенное пользователем, уже существует, и удалить ошибку, если имя уникально.

контекст в вашем методе валидатора при вызове из FormControl / FormBuilder не ссылается на ваш текущий компонент. Это причина, по которой this будет не определено.

Вы исправляете это, используя bind для привязки this к валидатору, чтобы задать контекст:

 validator: this.uniqueValidator.bind(this)
  

Вы можете протестировать его, распечатав this до и после применения bind:

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