Problem z wpisywanie znaków z wyprzedzeniem prepopulating NG-Bootstrap za podczas gdy opierając się na modelu napędzany form

Question

Załóżmy, że mam następujący wzór formularza napędzany:

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

i następujący szablon:

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

addressFormatter = param => param.description;

Powiedz address to obiekt o dwóch właściwościach: placeId i description.

Wydaje się niemożliwe do czynienia z formGroup (tutaj address) zamiast formControl (tutaj address.placeId) i nadal wstępnie wypełnić formularz z jednym z właściwości obiektu (np address.description).

pojawia się następujący błąd:

Error in ./UserAccountAddressComponent class UserAccountAddressComponent - inline template:8:9 caused by: control.registerOnChange is not a function TypeError: control.registerOnChange is not a function

I nie był w stanie wyświetlić jedną właściwość obiektu w polu (The address.description) i użyć innego kiedy przesłać formularz (address.placeId), a jednocześnie jest w stanie wstępnie wypełnić formularz jedną z właściwości obiektu (tutaj address.description).

Czy ktoś może pomóc?

Answer 1

Problem był w drodze I określonym mój reaktywną formę.

Zmiana od:

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

... do:

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

... Moje strony pozwoliło określić typ obiektu zamiast typu string dla całej kontroli wejściowej. Zobacz oficjalną dokumentację kątowego dla kontroli FormBuilder() metoda tutaj: https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html#!#control-anchor

edycji: Należy pamiętać, że to nie ma nic wspólnego z ramami ng bootsrap.

Answer 2

Chyba Twój błąd oznacza składnik binded z wejściem nie implementuje ControlValueAccessor interface. Spróbuj dodać [formControl] wiązania do wejścia:

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