как привязать автоматически заполненное выбранное значение к имени элемента управления - PullRequest
Новая
       34

как привязать автоматически заполненное выбранное значение к имени элемента управления

0 голосов
/ 23 января 2019

У меня угловатая (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));
}

Ответы [ 2 ]

0 голосов
/ 24 января 2019

OK - нашел решение: проблема заключалась в том, что не было подходящего элемента управления формы для привязки - то есть - в модели данных не было объекта (который впоследствии заполнял основную группу форм "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 больше не требуется), тип streetList - это массив StreetApi:

<p-autoComplete formControlName="SelectedStreet" [dropdown]="true" 
 [suggestions]="streetsList" [field] ="'StreetName'" 
 (completeMethod)="searchStreet($event)" [disabled]=!frm.value.CityID 
  ></p- autoComplete>
0 голосов
/ 23 января 2019

Я обнаружил, что предложения могут содержать объекты вместо атомарных типов и, используя имена их свойств для атрибута поля: 

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