Можно ли поменять значение из ValueChanges (размытие), чтобы сделать запрос?

Question

Я спрашиваю об этом, потому что я начал брать некоторые базовые уроки английского языка и сейчас использую некоторые фильтры, которые отправляют запрос в firebase, пока я печатаю с помощью ValueChanges:

Этокоторый используется для поиска:

<input
  type="search"
  placeholder="Teclee un proveedor..."
  [formControl]="campoBusqueda"
  />

И вот код, который у меня есть в ngOnInit() для работы с ним:

this.campoBusqueda = new FormControl();
this.campoBusqueda.valueChanges.subscribe(term => {
  this.busqueda = term;
  this.cargando = true;
  if (this.busqueda.length !== 0) {
    this.proveedoresService
      .getProveedoresSearch(this.busqueda)
      .subscribe(proveedores => {
        this.proveedores = [];
        // tslint:disable-next-line: forin
        for (const id$ in proveedores) {
          const p = proveedores[id$];
          p.id$ = id$;
          this.proveedores.push(proveedores[id$]);
        }
        if (this.proveedores.length < 1 && this.busqueda.length >= 1) {
          this.noresultados = true;
          this.proveedoresService
            .getProveedores()
            .subscribe( proveedores => {
              this.proveedores = [];
              // tslint:disable-next-line: forin
              for (const id$ in proveedores) {
                const p = proveedores[id$];
                p.id$ = id$;
                this.proveedores.push(proveedores[id$]);
              }
            });
        } else {
          this.noresultados = false;
        }
      });
    this.cargando = false;
    this.resultados = true;
  } else {
    this.proveedores = [];
    this.cargando = false;
    this.resultados = false;
  }
});

Теперь я хотел бы знать, еслиможно было бы использовать (размытие):

    <input
    type="search"
    placeholder="Teclee un proveedor..."
    [formControl]="campoBusqueda"
    (blur)="myNewSearchMethod()"
    />

Чтобы сделать запрос после того, как пользователь получает фокус ввода, вместо того, чтобы делать это каждый раз, когда пользователь вводит что-то во ввод.

Мой myNewSearchMethod(), который я использую правильно, знает:

    myNewSearchMethod() {
    this.campoBusqueda = new FormControl();
    this.busqueda = this.campoBusqueda.value;
    this.cargando = true;
    if (this.busqueda.length !== 0) {
        this.proveedoresService
          .getProveedoresSearch(this.busqueda)
          .subscribe(proveedores => {
            this.proveedores = [];
            // tslint:disable-next-line: forin
            for (const id$ in proveedores) {
              const p = proveedores[id$];
              p.id$ = id$;
              this.proveedores.push(proveedores[id$]);
            }
            if (this.proveedores.length < 1 && this.busqueda.length >= 1) {
              this.noresultados = true;
              this.proveedoresService
                .getProveedores()
                .subscribe( proveedores => {
                  this.proveedores = [];
                  // tslint:disable-next-line: forin
                  for (const id$ in proveedores) {
                    const p = proveedores[id$];
                    p.id$ = id$;
                    this.proveedores.push(proveedores[id$]);
                  }
                });
            } else {
              this.noresultados = false;
            }
          });
        this.cargando = false;
        this.resultados = true;
      } else {
        this.proveedores = [];
        this.cargando = false;
        this.resultados = false;
      };
  }

Проблема сейчас заключается в том, что когда я использую (размытие), значение ввода исчезает после вкладки или щелчка извход дает нулевое значение при достижении первого, если if (this.busqueda.length !== 0) { дает следующую трассировку стека в консоли:

ProveedoresComponent.html:5 ERROR TypeError: Cannot read property 'length' of null
at ProveedoresComponent.push../src/app/proveedores/proveedores/proveedores.component.ts.ProveedoresComponent.myNewSearchMethod (proveedores.component.ts:170)
at Object.eval [as handleEvent] (ProveedoresComponent.html:9)
at handleEvent (core.js:23097)
at callWithDebugContext (core.js:24167)
at Object.debugHandleEvent [as handleEvent] (core.js:23894)
at dispatchEvent (core.js:20546)
at core.js:20993
at HTMLInputElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)

Answer 1

Использовать updateOn FormHooks

Сообщает стратегию обновления AbstractControl (имеется в виду событие, при котором сам элемент управления обновляется).Возможные значения: «изменить» |«размытие» |'submit' Значение по умолчанию: 'change

component.ts

 campoBusqueda = new FormControl('',{
    updateOn:'blur'
  });

Пример :: https://stackblitz.com/edit/angular-5e7qd2

Answer 2

Да, это определенно будет работать для вас.Вам просто нужно удалить vlaueChanges подписку из .ts и просто вызвать функцию поиска, например,

в вашем файле .ts, просто сохранить этот код

searchForm : FormGroup;
this.searchForm = new FormGroup({
  searchField : new FormControl('')
})

myNewSearchMethod(){
  // This condition will check if there is some value in `searchField` or not
 if(this.searchForm.get('searchField ').value){
  // call your search function here
  }
}

<input
type="search"
placeholder="Teclee un proveedor..."
[formControl]="campoBusqueda"
(blur)="myNewSearchMethod()"
/>