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

问题描述

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

<标签>街道<p-autoComplete formControlName="StreetID" [dropdown]="true" [suggestions]="autoCompleteStreetsNames" (completeMethod)="searchStreet($event)" [disabled]=!frm.value.CityID value = "autoCompleteStreetsValues"[mcFieldValidation]="frm.controls.StreetID"></p-autoComplete>

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

autoCompleteStreets : Map= 新地图()；自动完成街道名称:字符串[]；autoCompleteStreetsValues : number[];搜索街(事件):无效{this.autoCompleteStreetsValues = [];if (event.query == ''){this.generalService.GetStreetsListByCity(this.frm.value.CityID).subscribe(items =>this.populateAutoCompleteStreets(items));}别的{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));}

解决方案

OK - 找到解决方案:问题是没有合适的表单控件可以绑定到——意思是——数据模型中没有包含 streetId 和 StreetName 的对象(之后通过form.reset"填充主表单组).解决方案是扩展数据模型(我创建了一个新类，该类继承了原始类，并具有 selectedStreet 的另一个属性对象):这是街道对象:

 公共类 StreetApi{公共 int StreetId { 获取；放;}公共 int CityId { 获取；放;}公共字符串 StreetName { 获取；放;}}

这是扩展类:

public class ExtendedUser : User{...公共 StreetApi SelectedStreet { 获取；放;}}

现在 - 反应形式基于扩展模型，这里是自动完成如何完美工作(不再需要 onSelect 事件)，streetList 类型是 StreetApi 的数组:

<p-autoComplete formControlName="SelectedStreet" [dropdown]="true"[建议]="streetsList" [field] ="'StreetName'"(completeMethod)="searchStreet($event)" [禁用]=!frm.value.CityID></p-自动完成>

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

解决方案

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

This is the extended class:

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

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