Sayı

Question

varsayalım aşağıdaki modele dayalı form var:

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

Ve aşağıdaki şablonu:

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

deyiniki özelliğe sahip bir nesnedir: placeId ve description.

öncesi (örn address.description) nesnenin özelliklerinden biri de doldurur bir (burada address.placeId) yerine formControl ait (burada address) formGroup ve hala başa imkansız gibi.

aşağıdaki hatayı alıyorum:

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

Tarlada (address.description) nesnenin bir özelliği görüntülemek mümkün değildi ve ben formu (address.placeId) gönderdiğinizde hala olurken başka birini kullanmak Formu nesne özelliklerinden biriyle prepopüle edebilir (burada address.description).

Birisi yardım edebilir mi?

Answer 1

konu benim reaktif formu belirtilen şekilde oldu. Değiştirme gelen

:

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

... için:

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

... Bir nesne türü yerine tüm giriş kontrolü için bir dize türü belirtmek için gözlerimi izin verdi. https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html#!#control-anchor

düzenlemek: yöntem burada FormBuilder kontrol() için resmi açısal belgelere bakın bu ng bootsrap çerçevesi ile ilgisi yoktur unutmayın.

Answer 2

Hatanız, girişinizle bağlanan bileşenin ControlValueAccessor interface uygulanmadığı anlamına gelir. girişinize bir [formControl] bağlayıcı eklemek için deneyin:

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