Styjun

Consonance v. Dissonance

Is there any benefit to riders on the front of a paceline?

Can I fix my boots by gluing the soles back on?

Telling my mother that I have anorexia without panicking her

Make 2019 with single digits

Read string of any length in C

How to control the output voltage of a solid state relay

How are aircraft depainted?

Python web-scraper to download table of transistor counts from Wikipedia

Would it be unbalanced to increase Wild Shape uses based on level?

Parallel resistance in electric circuits

What was the motivation for the invention of electric pianos?

Is there a tool to measure the "maturity" of a code in Git?

What does "boys rule, girls drool" mean?

Ethernet, Wifi and a little human psychology

Bit one of the Intel 8080's Flags register

Add text inside circuit component in circuitikz environment

New default file type?

What 68-pin connector is this on my 2.5" solid state drive?

Can I see Harvest moon in India?

What are these things that surround museum exhibits called?

Which is the current decimal separator?

How do certain apps show new notifications when internet access is restricted to them?

A Mainer Expression

filtering list and auto set last value of filtered list

How to apply filters to *ngFor?Angular - Set headers for every requestngFor with index as value in attributeHow to go back last pagehow to set value in array form with angularSuggestion List with Angular 5Placeholder in mat-autoComplete does not work as illustrated in the Angular Material Documentationmat autocomplete for a non-async dataHow to convert filtered autocomplete textbox from Angular templated form to Angular reactive form without ngModelIonic 3- Possible to trigger an IonChange event from component?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have a input box in html using mat-autocomplete, which filtered out the list on value changes, which is working fine. Actually I want to auto set the last remaining value of the array to the input box, which also is working fine, but the problem is I am unable to clear the value in the input box in browser using backspace after setting the value. Below is the code shortened for clarity.

<mat-form-field>
 <input formControlName="charge" name="charge" matInput placeholder="charge" [matAutocomplete]="auto">
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
 option 
 </mat-option>
 </mat-autocomplete>
</mat-form-field>

and in .ts file

filteredOptions: Observable<string[]>;
options: ['one', 'two', 'three', 'four', 'five', 'six'] // for demo purpose
filteredArr;

ngOnInit() 
 this.filteredOptions = this.myForm.get('charge').valueChanges
 .pipe(map(value => this._filter(value)));


private _filter(val) 
 const filterValue = val.toLowerCase();
 this.filteredArr = this.options.filter(option => option.toLowerCase().includes(filterValue));
 if(this.filteredArr.length == 1) 
 // tried with setValue too, same result
 this.myForm.get('charge').patchValue(this.filteredArr[0], emitEvent: false);
 this.filteredArr = [];
 return this.filteredArr;
 
 return this.filteredArr;

Thanks in advance. Let me know if required more information.

angular angular-reactive-forms

share|improve this question

asked Mar 28 at 11:34

SuryanSuryan

51555 silver badges1111 bronze badges

add a comment
 | 

0

I have a input box in html using mat-autocomplete, which filtered out the list on value changes, which is working fine. Actually I want to auto set the last remaining value of the array to the input box, which also is working fine, but the problem is I am unable to clear the value in the input box in browser using backspace after setting the value. Below is the code shortened for clarity.

<mat-form-field>
 <input formControlName="charge" name="charge" matInput placeholder="charge" [matAutocomplete]="auto">
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
 option 
 </mat-option>
 </mat-autocomplete>
</mat-form-field>

and in .ts file

filteredOptions: Observable<string[]>;
options: ['one', 'two', 'three', 'four', 'five', 'six'] // for demo purpose
filteredArr;

ngOnInit() 
 this.filteredOptions = this.myForm.get('charge').valueChanges
 .pipe(map(value => this._filter(value)));


private _filter(val) 
 const filterValue = val.toLowerCase();
 this.filteredArr = this.options.filter(option => option.toLowerCase().includes(filterValue));
 if(this.filteredArr.length == 1) 
 // tried with setValue too, same result
 this.myForm.get('charge').patchValue(this.filteredArr[0], emitEvent: false);
 this.filteredArr = [];
 return this.filteredArr;
 
 return this.filteredArr;

Thanks in advance. Let me know if required more information.

angular angular-reactive-forms

share|improve this question

asked Mar 28 at 11:34

SuryanSuryan

51555 silver badges1111 bronze badges

add a comment
 | 

I have a input box in html using mat-autocomplete, which filtered out the list on value changes, which is working fine. Actually I want to auto set the last remaining value of the array to the input box, which also is working fine, but the problem is I am unable to clear the value in the input box in browser using backspace after setting the value. Below is the code shortened for clarity.

<mat-form-field>
 <input formControlName="charge" name="charge" matInput placeholder="charge" [matAutocomplete]="auto">
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
 option 
 </mat-option>
 </mat-autocomplete>
</mat-form-field>

and in .ts file

filteredOptions: Observable<string[]>;
options: ['one', 'two', 'three', 'four', 'five', 'six'] // for demo purpose
filteredArr;

ngOnInit() 
 this.filteredOptions = this.myForm.get('charge').valueChanges
 .pipe(map(value => this._filter(value)));


private _filter(val) 
 const filterValue = val.toLowerCase();
 this.filteredArr = this.options.filter(option => option.toLowerCase().includes(filterValue));
 if(this.filteredArr.length == 1) 
 // tried with setValue too, same result
 this.myForm.get('charge').patchValue(this.filteredArr[0], emitEvent: false);
 this.filteredArr = [];
 return this.filteredArr;
 
 return this.filteredArr;

Thanks in advance. Let me know if required more information.

angular angular-reactive-forms

share|improve this question

asked Mar 28 at 11:34

SuryanSuryan

51555 silver badges1111 bronze badges

<mat-form-field>
 <input formControlName="charge" name="charge" matInput placeholder="charge" [matAutocomplete]="auto">
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
 option 
 </mat-option>
 </mat-autocomplete>
</mat-form-field>

filteredOptions: Observable<string[]>;
options: ['one', 'two', 'three', 'four', 'five', 'six'] // for demo purpose
filteredArr;

ngOnInit() 
 this.filteredOptions = this.myForm.get('charge').valueChanges
 .pipe(map(value => this._filter(value)));


private _filter(val) 
 const filterValue = val.toLowerCase();
 this.filteredArr = this.options.filter(option => option.toLowerCase().includes(filterValue));
 if(this.filteredArr.length == 1) 
 // tried with setValue too, same result
 this.myForm.get('charge').patchValue(this.filteredArr[0], emitEvent: false);
 this.filteredArr = [];
 return this.filteredArr;
 
 return this.filteredArr;

angular angular-reactive-forms

angular angular-reactive-forms

share|improve this question

asked Mar 28 at 11:34

SuryanSuryan

51555 silver badges1111 bronze badges

share|improve this question

asked Mar 28 at 11:34

SuryanSuryan

51555 silver badges1111 bronze badges

asked Mar 28 at 11:34

SuryanSuryan

51555 silver badges1111 bronze badges

asked Mar 28 at 11:34

SuryanSuryan

51555 silver badges1111 bronze badges