Question

我有一个带有（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));
}

Answer 1

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

@Setter

组件代码：

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

Answer 2

确定-找到了解决方案：问题在于，没有适当的表单控件要绑定到-意味着-数据模型中没有对象（此后通过“ form.reset”填充主表单组）同时包含streetId和StreetName。解决方案是扩展数据模型（我创建了一个新类，该类从原始类继承而来，并具有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事件），treesList类型是StreetApi的数组：

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

如何将自动完成的选定值绑定到表单控件名称

2 个答案: