角4 ngモデルのフォームバインディング

Question

私は顧客を編集するためのフォームを持っています。 フォームは動的で、ユーザはフィールドを作成して並べ替えることができます。

私はフォームのテンプレートを提供する最初の呼び出しがあり、顧客の価値をそれにバインドする必要があります。

これは私のコードです：

<form (ngSubmit)="saveCustomer($event); $event.preventDefault()"> 
<div class="row"> 
    <div class="col-sm-12 pb10"> 
     <h2>{{customerMapped?.name}}</h2> 
     <span>{{customerMapped?.street}}</span><br/> 
     <span>{{customerMapped?.zip}} {{customerMapped?.city}}</span> 
    </div> 
    <div class="col-sm-12" *ngFor="let section of template?.sections"> 
     <h3 class="bordered-top pt10">{{section.displayName}}</h3> 
     <div class="row"> 
      <div class="col-sm-6" *ngFor="let attribute of section?.attributes"> 
       <div class="form-group"> 
        <label for="code">{{attribute.displayName}}</label> 
        <input type="text" class="form-control" id="{{attribute.name}}" 
        name="customerMapped[attribute.name]" 
        [ngModel]="customerMapped[attribute.name]" 
        (ngModelChange)="customerMapped[attribute.name] = $event" 
        /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

私はsaveCustomer方法ではconsole.log（this.customerMapped）を行う場合、私は、入力値を変更すると、それは私によい件のデータを示し、それはcustomerMapped値を変更します。

誰にでも鐘が鳴りますか？ :-)

EDIT

入力が今満たされているが、彼らは間違った値で満たされている、それは私の[attribute.name]動的な名前を気にしない結合のようなものです：

LAST EDIT

はそれを動作させるために、I

<label for="code">{{attribute.displayName}}</label> 
<input type="text" class="form-control" id="{{attribute.name}}" name="{{attribute.name}}" 
[ngModel]="customerMapped[attribute.name]" 
(ngModelChange)="customerMapped[attribute.name] = $event"/> 

を、ルートレベルで属性からすべての値を持つために私のオブジェクトを再編成する：しなければなりませんでした。

Answer 1

ngModel角括弧

にする必要があります

<input type="text" class="form-control" id="{{attribute.name}}" 
     name="customerMapped[attribute.name]" 
     [ngModel]="customerMapped[attribute.name]" 
     (ngModelChange)="customerMapped[attribute.name] = $event"/>