Проблема с предварительным заполнением ng-bootstrap typehead при использовании форм, управляемых моделью

Предположим, у меня есть следующая управляемая моделью форма:

this.addressForm = this.formBuilder.group({
  address: this.formBuilder.group({
    placeId: [this.address.placeId],
    description: [this.address.description]
  })
});

И следующий шаблон:

<form [formGroup]="addressForm" (ngSubmit)="updateAddress()" novalidate>
  <div class="form-group">
    <div class="input-group">
      <input type="text"
         formControlName="address"
         placeholder="Type in you address"
         [ngbTypeahead]="chooseAddress"
         [inputFormatter]="addressFormatter"
         [resultFormatter]="addressFormatter"
         autocomplete="off"
         class="form-control">
    </div>
   ...
</form>

адрес форматирования:

addressFormatter = param => param.description;

Скажем, address — это объект с двумя свойствами: placeId и description.

Кажется невозможным иметь дело с formGroup (здесь address) вместо formControl (здесь address.placeId) и по-прежнему предварительно заполнять форму одним из свойств объекта (например, address.description).

Я получаю следующую ошибку:

Ошибка в классе ./UserAccountAddressComponent UserAccountAddressComponent — встроенный шаблон: 8:9, вызванная: control.registerOnChange не является функцией TypeError: control.registerOnChange не является функцией

Мне не удалось отобразить одно свойство объекта в поле (address.description) и использовать другое при отправке формы (address.placeId), но при этом я мог предварительно заполнить форму одним из свойств объекта (здесь address.description).

Может кто-нибудь помочь?


angular angular2-forms ng-bootstrap
person balteo    schedule 29.12.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я предполагаю, что ваша ошибка означает, что компонент, связанный с вашим вводом, не реализует интерфейс ControlValueAccessor. Попробуйте добавить привязку [formControl] к вашему вводу:

<form [formGroup]="addressForm" (ngSubmit)="updateAddress()" novalidate>
  <div class="form-group">
    <div class="input-group">
      <input type="text"
         formControlName="address"
         [formControl]="addressForm.address"
         placeholder="Type in you address"
         [ngbTypeahead]="chooseAddress"
         [inputFormatter]="addressFormatter"
         [resultFormatter]="addressFormatter"
         autocomplete="off"
         class="form-control">
    </div>
   ...
</form>
person Karbos 538    schedule 04.01.2017
comment
опечатка? [formControl]="adressForm.adress" - person stealththeninja; 07.01.2017
comment
@Karbos: Большое спасибо за ваш вклад. Не могли бы вы объяснить, чего достигнет привязка [formControl], и сравнить ее с атрибутом formControlName? - person balteo; 07.01.2017
comment
@stealththeninja: я заметил опечатку и изменил адрес. И тебе спасибо. - person balteo; 07.01.2017
comment
@karbos Не могли бы вы также сказать, какой компонент вы называете компонентом, связанным с моим вводом? - person balteo; 07.01.2017

arrow_upward
0
arrow_downward

Проблема заключалась в том, как я указал свою реактивную форму.

Изменение с:

this.addressForm = this.formBuilder.group({
  address: this.formBuilder.group({
    placeId: [this.address.placeId],
    description: [this.address.description]
  })
});

...to:

this.addressForm = this.formBuilder.group({
  address: this.formBuilder.control({//Notice the control() method instead of group() method
    placeId: this.address.placeId,
    description: this.address.description
  })
});

...позволил мне указать тип объекта вместо строкового типа для всего элемента управления вводом. См. официальную документацию по angular для метода FormBuilder control() здесь: https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html#!#control-anchor

изменить: обратите внимание, что это не имеет ничего общего с фреймворком ng bootsrap.

person balteo    schedule 09.01.2017