NgFormModel NgControl読み取り値

Question

私は既に入力テキストフィールドに値があるフォームを持っています。送信ボタン（変更）の後、変更されていない入力フィールドはjsonオブジェクトに空の文字列を返します。あなたは私が持って見ることができるように

//the component 
 

 
this.builder = fb; 
 

 
this.EditUserForm = this.builder.group({ 
 

 
    firstName: ["", Validators.required], 
 

 
    lastName: ["", Validators.required], 
 

 
}); 
 

 

<form [ngFormModel]="EditUserForm" (submit)="saveChanges($event)"> 
 

 
      <div class="col-xs-2"> 
 

 
      <label for="firstname">First Name</label> 
 

 
      <input class="form-control" id="firstname" ngControl="firstName" type="name" required value={{person.firstName}}> 
 

 
      </div> 
 

 
      <div class="col-xs-2" > 
 

 
       <label for="lastname">Last Name</label> 
 

 
       <input class="form-control" id="lastname" ngControl="lastName" type="name" required value={{person.lastName}}> 
 

 
      </div> 
 

 
     
 

 
      <div class="container"> 
 

 
       <button type="submit" class="btn btn-primary">Save Changes</button> 
 

 
       </div>     
 

 
    </form> 
 

 

は、すでに入力の値。しかし、ngControlはこれをとらない。入力テキストフィールドに変更値を入力した場合のみ。値person.firstnameを表示しますが、ngControlで読み取れません

Answer 1

その他の答えは（あなたの設定で）になり、

あなたはactally入力制御と更新ngCtrlの状態にあなたの価値をバインドし[(ngModel)]ディレクティブを使用することができます。

<input ... [(ngModel)]="person.firstName" #firstName="ngForm" ...> 

同じのここでの作業例を見て、

https://plnkr.co/edit/hvAG3lLpfP80U9hMKAEA?p=preview

Answer 2

テンプレート内のコントロールをバインドするには[ngFormControl]を使用する必要があります。

//the component 
 

 
this.builder = fb; 
 

 
this.EditUserForm = this.builder.group({ 
 

 
    firstName: ["", Validators.required], 
 

 
    lastName: ["", Validators.required], 
 

 
}); 
 

 

<form [ngFormModel]="EditUserForm" (submit)="saveChanges(EditUserForm.values)"> 
 

 
      <div class="col-xs-2"> 
 

 
      <label for="firstname">First Name</label> 
 

 
      <input class="form-control" id="firstname" [ngFormControl]="EditUserForm.controls['firstname']" type="name" required value={{person.firstName}}> 
 

 
      </div> 
 

 
      <div class="col-xs-2" > 
 

 
       <label for="lastname">Last Name</label> 
 

 
       <input class="form-control" id="lastname" [ngFormControl]="EditUserForm.controls['lastname']" type="name" required value={{person.lastName}}> 
 

 
      </div> 
 

 
     
 

 
      <div class="container"> 
 

 
       <button type="submit" class="btn btn-primary">Save Changes</button> 
 

 
       </div>     
 

 
    </form>