垫自动完成formControlName [英] Mat-Autocomplete formControlName

问题描述

我在Mat-Autocomplete上使用formControlName时遇到问题. 我不知道为什么，但是我的formControlName不会发送数据，我把它弄错了吗? 当我尝试从HTML删除[formControl]时，它始终无法过滤.

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是我获取银行列表的位置，_validationService是我获取每个表单名称的验证的位置.

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]
});

使用

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

并解决问题

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

使用

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

它应该可以解决您的问题.

it should fix your problem.

这篇关于垫自动完成formControlName的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！