Я получаю неопределенное значение для общих данных, введенных в директиву - PullRequest
Новая
       13

Я получаю неопределенное значение для общих данных, введенных в директиву

0 голосов
/ 20 мая 2018

Итак, я пытаюсь внедрить общие данные в директиву, которая будет использоваться валидатором для проверки введенного пользователем адреса электронной почты.Моя проблема в том, что я получаю неопределенное значение для моих общих данных внутри директивы.Вот фрагменты:

registration.html 

  div class="form-group md-form" [class.has-error]="email.touched && email.dirty && email?.errors?.emailExist">
    <i class="fa fa-envelope prefix grey-text"></i>
    <input type="email" name="email" id="email" email="true" appCheckEmail [(ngModel)]="dealerRegistrationInput.email" #email="ngModel" class="form-control" placeholder="Email Address">
     <div class="help-block alert alert-danger " *ngIf="email.errors && (email.dirty || email.touched) && email?.errors?.emailExist">
     <div [hidden]="!email.errors.email">
      A valid email is required.
     </div>
    <div [hidden]="email?.errors.emailExist">
      This email address already exist
    </div>
   </div>
  </div>

registration.ts 

.......
 constructor(
    private router: Router,
    private route:  ActivatedRoute,
    private http: HttpClient,
    private sharedData: SharedDataService,
    private connectService: ConnectService,
    private modalService: BsModalService) { }

  ngOnInit() {
     this.connectService.getAllDealers().subscribe((dealers: Dealer[]) => {
      this.sharedData.dealers  = dealers;
      console.log('Dealers.....' + JSON.stringify(this.sharedData.dealers));
    });
  }
 ............
 .........
 .............

директива проверки почты 

    import {  Input, Directive, forwardRef } from '@angular/core';
    import { Validator, FormControl, AbstractControl, NG_VALIDATORS, ValidationErrors } from '@angular/forms';
    import { SharedDataService } from './shared-data.service';


    /* ......Functions.........................*/

      function appCheckEmail(dealersEmails: string[]) {
console.log('Dealers..:   ' + JSON.stringify(dealersEmails)); //THIS IS UNDEFINED
           return (control: AbstractControl) => {
  console.log('Dealers email addresses2:   ' + JSON.stringify(dealersEmails));
  console.log('Control value: ' + control.value)
  ...

  ...
      if (dealersEmails.indexOf(control.value) >= 0) {
                   return null;
           } else {
              return{  emailnotExist: true  };
           }
        };
       }

     /* -------------------------End of Functions.............*/

    @Directive({
      selector: '[appCheckEmail][ngModel], [appCheckEmail][ngModel]',
      providers: [{
        provide: NG_VALIDATORS,
        useExisting: forwardRef(() => CheckEmailDirective),
        multi: true
      }]
    })

    export class CheckEmailDirective implements Validator {
      validator: Function;

      constructor(private sharedData: SharedDataService) {

      this.validator = appCheckEmail(sharedData.dealers); /* sharedData.dealers is undefined */
         }
         validate(control: AbstractControl): ValidationErrors | null {
            return this.validator(control);
          }

        }

каким-то образомобщие данные в директиве, несмотря на то, что внедрение не указывает на правильную ссылку, или значение очищается.Я также заметил кое-что очень любопытное ... директива checkMail выполняется после рендеринга html ... до ввода каких-либо данных и, очевидно, при каждом нажатии клавиши в целевом поле ввода .... могло ли такое поведение вызывать проблему?Я был бы признателен за любую помощь, которую я могу получить.

- РЕДАКТИРОВАТЬ-- После изменения параметра appCheckEmail на appCheckEmail(sharedData:SharedDataService)

и поиска indexOf на: 

 if (sharedData.dealers.indexOf(control.value) >= 0){....}

Поиск все еще не может найти соответствие.Я подтвердил с помощью console.log, что массив sharedData.dealers на самом деле является массивом строк, а control.value - строкой со значениями, которые я ожидаю.Я также пробовал простой цикл for с:

if (sharedData.dealers [i] === control.value) Я даже пробовал: if (sharedData.dealers [i] === 'emailinarray @ mail.com ')

и оба терпят неудачу.Я знаю, что я упускаю что-то фундаментальное здесь, но я не могу найти это.Может ли быть так, что sharedData.dealers [i] все еще указывает на неправильное место, даже если я передал ссылку в конструкторе?

1 Ответ

0 голосов
/ 20 мая 2018

Вместо передачи dealers в функцию validate, вы должны передать ссылку на ваш сервис этой функции.Проблема с вашим решением заключается в том, что dealers не существует в constructor.Вы извлекаете dealers в вашем Component асинхронно, поэтому они не могут существовать во время сборки в вашем Directive конструкторе 

import {  Input, Directive, forwardRef } from '@angular/core';
import { Validator, FormControl, AbstractControl, NG_VALIDATORS, ValidationErrors } from '@angular/forms';
import { SharedDataService } from './shared-data.service';


/* ......Functions.........................*/

function appCheckEmail(sharedData: SharedDataService) {

  return (control: AbstractControl) => {
    console.log('Dealers email addresses2:   ' + JSON.stringify(sharedData.dealersEmails));
    console.log('Control value: ' + control.value)
    ...

    ...
    if (sharedData.dealersEmails.indexOf(control.value) >= 0) {
      return null;
     } else {
      return{  emailnotExist: true  };
    }
  };
}

/* -------------------------End of Functions.............*/

@Directive({
  selector: '[appCheckEmail][ngModel], [appCheckEmail][ngModel]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: forwardRef(() => CheckEmailDirective),
    multi: true
  }]
})
export class CheckEmailDirective implements Validator {
  validator: Function;

  constructor(private sharedData: SharedDataService) {
    this.validator = appCheckEmail(sharedData); /* sharedData.dealers is undefined */
  }
  
  validate(control: AbstractControl): ValidationErrors | null {
    return this.validator(control);
  }

}
...