如何将自动完成选择的值绑定到窗体控件名称 [英] how to bind auto-complete selected value to form Control Name

问题描述

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

I'm having an Angular(6) reactive form with a (prime-ng) autocomplete control. I'm managing to populate it correctly with values (of streets), but I'm missing something when trying to bind the streetID (and not street name) to the form control. I tried to use the value attribute, but it still didn't fixed it. See my Html code:

<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>

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

This is the complete method with variable declarations:

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

推荐答案

确定-找到了解决方案: 问题是没有适当的表单控件绑定到-意味着-数据模型中没有对象(此后通过"form.reset"填充主表单组)同时包含streetId和StreetName.解决方案是扩展数据模型(我创建了一个新类，该类从原始类继承而来，并具有一个更多的selectedStreet属性对象): 这是街道对象:

OK - Found a solution: the problem was that there wasn't an appropriate form control to bind to - meaning - there was no object in the data model (which afterwards was populate the main form group by "form.reset") which contained both the streetId and StreetName. The solution was to extend the data model (I created a new class which inherits from the original one and has one more property object of selectedStreet): This is the street Object:

 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事件)，treesList类型是StreetApi的数组:

Now - the reactive form is based on the extended model, and here is how the auto complete works perfectly (the onSelect event is no longer needed), the streetsList type is an array of StreetApi:

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

这篇关于如何将自动完成选择的值绑定到窗体控件名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！