Mat-Autocomplete formControlName

mat-autocomplete displaywith
mat-autocomplete required
mat-autocomplete opened
mat-autocomplete display value
mat-autocomplete default value
mat-autocomplete close panel
mat-autocomplete connected to
mat-autocomplete tooltip

I have issue using formControlName on Mat-Autocomplete. i dont know why but my formControlName wont send the data, am i put it wrong? When i try to remove [formControl] from HTML, its always cant filter.

HTML

<form [formGroup]="form" #legalDataFrm="ngForm" autocomplete="off" fxLayout.gt-sm="column" fxFlex="1 1 auto" novalidate>
  <input type="text" placeholder="Pilih Bank" 
    formControlName="bankName" matInput 
    [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete 
    #auto="matAutocomplete" 
    (optionSelected)='onChangeBank()' 
    [displayWith]="displayFn">
      <mat-option>Pilih Bank</mat-option>
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.bankName}}
      </mat-option>
    </mat-autocomplete>
</form>

TS _bankService is where i get the Bank List, _validationService is where i get the validation for each form name.

export class FpLegalDataFormComponent implements OnInit, OnDestroy {
form: FormGroup;
myControl = new FormControl();
options: User[];
filteredOptions: Observable<User[]>;

constructor(
private activatedRoute: ActivatedRoute,
private formBuilder: FormBuilder,
public _validationsService: ValidationsService,
public _bankService: BankService
) {
}
 this.form = this.formBuilder.group({
  bankName      : [bankName, Validators.required]
});
displayFn(user?: User): string | undefined {
return user ? user.bankName : undefined;
}

private _filter(name: string): User[] {
const filterValue = name.toLowerCase();

 return this.options.filter(option => 
 option.bankName.toLowerCase().indexOf(filterValue) > -1);
 }
 private initDropdown() {
 this._bankService.getBank().then((response) => {
   console.log(response.data.bankList)
   this.options = response.data.bankList;
   console.log(this.options)
   this.filteredOptions = this.myControl.valueChanges
   .pipe(
     startWith<string | User>(''),
     map(value => typeof value === 'string' ? value : value.bankName),
     map(name => name ? this._filter(name) : this.options.slice())
   );
 })
}

First of all it's good to initialize the form control so insted of:

this.form = this.formBuilder.group({
  bankName      : [bankName, Validators.required]
});

use

this.form = this.formBuilder.group({
  bankName: new FormControl(bankName, Validators.required)
});

and to fix the problem insted of

<input type="text" placeholder="Pilih Bank" 
    formControlName="bankName" matInput 
    [formControl]="myControl" [matAutocomplete]="auto">

use

<input type="text" placeholder="Pilih Bank" matInput 
    [formControl]="form.get('bankName')" [matAutocomplete]="auto">

it should fix your problem.

angular-autocomplete-employee, <mat-form-field>. <input. matInput. type="text". placeholder="Name". [​matAutocomplete]. ="auto". formControlName="em. ployee". > <mat-​autocomplete. < mat-autocomplete > < mat-option * ngFor = "let option of options" [value]= "option" > {{ option }} </ mat-option > </ mat-autocomplete > Now we'll need to link the text input to its panel. We can do this by exporting the autocomplete panel instance into a local template variable (here we called it "auto"), and binding that variable to the

HTML

<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>```

TS File
myControl: FormControl = new FormControl();
options = [
'One',
'Two',
'Three'
];

Binding in mat-autocomplete control - Support, Dear @team,I used mat-autocomplete control in my screen but i can\'t binding formControlName to default select.Modelexport class  This page will provide Angular Material Select with search using <mat-autocomplete> element. The autocomplete is a normal text input with a panel of suggested options. Find the sample code to create select dropdown with search facility.

TS:

public form: FormGroup = this.formBuilder.group({
    control: [undefined, [Validators.required]],
});
//
this.filtered = this.signupForm.controls.control.valueChanges.pipe(...);

HTML:

<mat-form-field>
        <input type="text"
               matInput
               [matAutocomplete]="auto"
               formControlName="control">
        <mat-autocomplete autoActiveFirstOption
                          #gymAuto="matAutocomplete"                      
(optionSelected)="form.controls.control.setValue($event.option.value)">
          <mat-option *ngFor="let option of filtered | async"
                      [value]="option">
            {{option.name}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

Angular 8/9 Autocomplete Tutorial with Angular Material, Today we are going to create Autocomplete in Angular 8/9 using Angular Material UI components. Then, we'll import MatAutocompleteModule in the app​. placeholder="States Group" formControlName="stateGroup"  Today we are going to create Autocomplete in Angular 8/9 using Angular Material UI components. The autocomplete is a functionality which shows the recommended options to the user when the user clicks on the input field or enters some keywords in an input field. We’ll create an Angular 8 app from scratch to show how […]

Angular Material Autocomplete Component Force Selection , mat-form-field class = "full-width" >. < input type = "text" placeholder = "Project" matInput formControlName = "project". [matAutocomplete]="projectAutoComplete​">. In this mat-chip-list there’s an input-field that is linked to the mat-autocomplete component. The input-field also has a few attributes necessary for the chiplist. If you start typing in this input-field, you get the autocomplete list, but you can also add fruits (when they are available in the autocomplete-list) by typing the complete name and pressing enter or a comma (specified in matChipInputSeparatorKeyCodes).

Reusable Angular Material Input Autocomplete form control , In this example I will use an Angular Material Autocomplete form control </mat-​form-field> <mat-autocomplete #auto="matAutocomplete" or a [formControl] | formControlName , template driven or reactive form respectively. classList: string. Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.

Input's FormControl setValue does not work when mat-form-field has , Deleting mat-chip-list or removing the matAutocomplete directive fixes <input #​categoryInput matInput formControlName="categoryInput" . Angular Bootstrap autocomplete Angular Autocomplete - Bootstrap 4 & Material Design. Angular Bootstrap autocomplete is a component that predicts the words based on the first few letters given by a user, while they are typing it.

Comments
  • Remove [formControl]="myControl" => as this is work like formControlName
  • and paste your HTML and TS whole code to get proper solution, cause ,autocomplete have the filtered option which has to be defined anywhere
  • but when i remove [formControl] its wont filter the user input. okay, ill paste my complete code
  • remove formControlName="bankName" and also remove from <form=>[formGroup]="form" as this will not needed
  • eh? why i should remove the [formGroup]? it must have impact to my other field
  • i think this make a little improvement, but i still got an error. thank you,,
  • And in the initDropdown() function use form.get('bankName').valuechanges
  • i do this when i tried for the first time from the documents. its work fine until i tried to send the value
  • Okay If u want to set into your code I can help u... I am updating your code and sent u back if u want
  • this._bankService.getBank().then((response) => { console.log(response.data.bankList) this.options = response.data.bankList; console.log(this.options) this.filteredOptions = this.form.controls.bankName.valueChanges .pipe( startWith<string | User>(''), map(value => typeof value === 'string' ? value : value.bankName), map(name => name ? this._filter(name) : this.options.slice()) ); })
  • and remove your formcontrol ==>[formControl]="myControl"
  • is my edited code on my question still not enough for u? if it ill try to edit again to complete code