来自动态表单的角垫自动完成检索选项

时间:2020-06-10 15:53:42

标签: angular dynamic-forms

我有一个带有多个控件的动态表单。我试图动态地将mat-autocomplete称为一个控件,但是我无法获取选项列表。不确定我在哪里做错了吗? 这是我的自动填充动态组件。

<div *ngSwitchCase="'autoComplete'">
  <mat-form-field class="col-md-12">
    <input type="text"
           matInput
           class="form-control col-md-12 col-xs-12"
           [formControlName]="question.key"
           [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let option of question.options | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

这是我的消息来源,我如何称呼上述控件

{
    "key": "businessDescription",
    "label": "Description of business :",
    "type": "text",
    "controlType": "autoComplete",
    "options": this.filteredOptions,
    "description": "",
    "horizontalRule": true,
  },

如果不使用超时,表单将引发未定义的错误。

 options: string[] = ['One', 'Two', 'Three'];
 filteredOptions: Observable<string[]>;

ngOnInit() {
setTimeout(()=>{
  this.filteredOptions = this.appDetailFormComponent.form.get('businessDescription').valueChanges.pipe(
    startWith(''),
    map(value => this._filter(value))
  );
})
}

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

return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);}

这里有任何指南可解决此问题:(

0 个答案:

没有答案