Запретить Angular преобразовать входной текст обратно в исходное значение - PullRequest
0 голосов
/ 14 апреля 2020

Я хотел бы разрешить пользователю вводить или выбирать раскрывающийся список bootstrap. Если пользователь вводит текст и теряет фокус на элемент ввода (событие размытия триггера), он ищет описание списка национальностей и использует jquery для обновления текста ввода. например, country1 -> Country1

Теперь, когда я набираю country1 и запускаю событие размытия, оно конвертируется в Country1, но затем снова конвертируется в country1. Любой способ предотвратить это?

Вот мой angular код.

Компонент

  // Data
  userdata={nationality:undefined};
  countryData=[{id:0, description:"Country0"}, {id:1, description:"Country1"}, {id:2, description:"Country2"}];

  // Bootstrap typeahead
  searchCountry = (text$: Observable<string>) =>
    text$
      .debounceTime(200)
      .distinctUntilChanged()
      .map(term => term.length < 2 ? []
        : this.countryData.filter(nationality => nationality.description.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 15));
  nationalityFormatter = (nationality) => nationality.description;


  // Blur event
  $onBlur() {
    let domElement = $('#my_company_country_description');

    if (domElement) {
      this.userdata.nationality = this.getCountry(domElement, this.countryData);
    }
  }

  // Check the input text (case insensitive)
  getCountry(company_country: JQuery<HTMLElement>, countries: any[]) {
    for (let i = 0; i < countries.length; i++) {
      let str: any = company_country.val();
      if (str && countries[i].description.toLowerCase() === str.toLowerCase()) {
        return JSON.parse(JSON.stringify(countries[i]));
      }
    }

    company_country.val("");
    return undefined;
  }

HTML

        <input id="my_company_country_description" (blur)="$onBlur()" type="text" class="form-control "
          [(ngModel)]="userdata.nationality" [ngbTypeahead]="searchCountry" name="nationality" #nationality="ngModel"
          [inputFormatter]="nationalityFormatter" [resultFormatter]="nationalityFormatter" [editable]='false'
          placeholder="" required />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...