I´m asking this because I started taking some basic angular lessons and I´m using some filters at the moment that send the request to firebase while I´m typing with ValueChanges:
This is the imput that is used to search:
<input
type="search"
placeholder="Teclee un proveedor..."
[formControl]="campoBusqueda"
/>
And this is the code I have in ngOnInit() to work with it:
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;
}
});
Now what I´d like to know is if it would be possible to use (blur):
<input
type="search"
placeholder="Teclee un proveedor..."
[formControl]="campoBusqueda"
(blur)="myNewSearchMethod()"
/>
To make the request after the user gets the focus out of the input instead of making it everytime the user types something in the input.
My myNewSearchMethod() that I´m using right know is :
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;
};
}
The problem right now is that when I´m using (blur) the value of the input disapears after tabbing or clicking out of the input giving a null value when it reached the first if if (this.busqueda.length !== 0) { giving the next stacktrace in console:
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)
Use updateOn FormHooks
Reports the update strategy of the AbstractControl (meaning the event on which the control updates itself). Possible values: 'change' | 'blur' | 'submit' Default value: 'change
component.ts
campoBusqueda = new FormControl('',{
updateOn:'blur'
});