在模型驱动形式（反应式）中将值设置为 ngtypeahead

Question

我正在使用 Angular Reactive 表单并通过 ng-bootstrap typeahead 获得 typeahead 字段。我有一个使用如下界面创建的状态列表 -

export interface IContactStates {
   Id: number;
   Name: string;
}

状态列表通过服务填充，并且 typeahead 在 component.ts 中初始化为 -

search = (text$: Observable<string>) =>
  text$
    .debounceTime(200)
    .distinctUntilChanged()
    .map(term => term === '' ? []
      : this.statesList.filter(v => 
v.Name.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))

formatter = (x: {Name: string}) => x.Name;

和 ngbTypahead 在 html 模板中定义如下 -

<ng-template #rt let-r="result" let-t="term">
        {{ r.Name}}
      </ng-template>
    <div class="col-md-6">
        <div class="form-group input-group-sm"
            [ngClass]="{'has-error': displayMessage.State}">
            <label for="State">State</label>
            <input class="form-control form-control-sm" formControlName="State" 
            type="text" [ngbTypeahead]="search"
            [resultTemplate]="rt"
            [resultFormatter]="formatter"
            [inputFormatter]="formatter"            
            [editable]="false"
            placeholder="State (start typing the name and then select from list)"
            (selectItem)="selectItem($event)">
            <span class="help-block" *ngIf="displayMessage.State">
                {{displayMessage.State}}
            </span>
        </div>
    </div>

这在我创建新表单时工作正常，但当我尝试编辑任何已提交的表单时，状态控制值设置为未定义。我试图从 ng-bootstrap 帮助文档中获得有关设置预输入值的任何提示，但没有运气。

Answer 1

好的。我让它工作。只需再次重新初始化表单控件元素。

更新 1 从服务器获取所选项目的值后，搜索该对象并将其分配给我的表单控件。

const state = this.statesList.find(function(item){
        return item.Id === trader.State;

然后，使用此变量修补 Typeahead 控件。