如何绑定自动完成选定的值以形成控件名称答案

【问题标题】：how to bind auto-complete selected value to form Control Name如何绑定自动完成选定的值以形成控件名称
【发布时间】：2019-06-16 20:29:41
【问题描述】：

我有一个带有 (prime-ng) 自动完成控件的 Angular(6) 反应形式。我正在设法用（街道的）值正确填充它，但是在尝试将 streetID（而不是街道名称）绑定到表单控件时我遗漏了一些东西。我尝试使用 value 属性，但它仍然没有修复它。查看我的 Html 代码：

<div class="form-group">
        <label>Street
          <p-autoComplete formControlName="StreetID" [dropdown]="true" [suggestions]="autoCompleteStreetsNames" (completeMethod)="searchStreet($event)" [disabled]=!frm.value.CityID value = "autoCompleteStreetsValues"  [mcFieldValidation]="frm.controls.StreetID"></p-autoComplete>
        </label>
      </div>

这是带有变量声明的完整方法：

autoCompleteStreets : Map<number, string> = new Map(); 
autoCompleteStreetsNames : string[];
autoCompleteStreetsValues : number[];

searchStreet(event) : void{
this.autoCompleteStreetsValues = [];
if (event.query == '')
{
  this.generalService.GetStreetsListByCity(this.frm.value.CityID).subscribe(items =>this.populateAutoCompleteStreets(items));
} 
else
{
  this.generalService.GetCityListByPrefix(this.frm.value.CityID, event.query).subscribe(items => this.populateAutoCompleteStreets(items));
}

}

populateAutoCompleteStreets(lutItems : UnifiedLut[])
{
 this.autoCompleteStreetsNames = lutItems.map(item => item.Value);
 this.autoCompleteStreetsValues = lutItems.map(item => item.Code);
 lutItems.map(lutItem =>  this.autoCompleteStreets.set(lutItem.Code, 
lutItem.Value));
}

【问题讨论】：

标签： angular autocomplete primeng angular-reactive-forms

【解决方案1】：

我发现建议可以包含对象而不是原子类型，并使用它们的属性名称作为字段属性：

<div class="form-group">
        <label>{{title.StreetID}}
          <p-autoComplete formControlName="StreetID" [dropdown]="true" [suggestions]="streetsList" [field] ="'StreetName'" (completeMethod)="searchStreet($event)" [disabled]=!frm.value.CityID (onSelect)="onSelect($event)" ></p-autoComplete>
        </label>
      </div>

组件代码：

streetsList : SysStreetApi[];
selectedStreet : SysStreetApi;

onSelect(street : SysStreetApi)
{
  this.selectedStreet = street;
  this.frm.value.StreetID = this.selectedStreet.StreetId;
}

【讨论】：

【解决方案2】：

好的 - 找到了解决方案：问题是没有合适的表单控件来绑定——意思是——数据模型中没有包含streetId和StreetName的对象（随后通过“form.reset”填充主表单组）。解决方案是扩展数据模型（我创建了一个新类，它继承自原来的类，并且还有一个 selectedStreet 的属性对象）：这是街道对象：

 public class StreetApi 
{
    public int StreetId { get; set; }
    public int CityId { get; set; }
    public string StreetName { get; set; }
}

这是扩展类：

public class ExtendedUser : User
{...
    public StreetApi SelectedStreet { get; set; }
}

现在 - 反应式表单是基于扩展模型的，这是自动完成的完美工作方式（不再需要 onSelect 事件），streetsList 类型是 StreetApi 的数组：

<p-autoComplete formControlName="SelectedStreet" [dropdown]="true" 
 [suggestions]="streetsList" [field] ="'StreetName'" 
 (completeMethod)="searchStreet($event)" [disabled]=!frm.value.CityID 
  ></p- autoComplete>

【讨论】：