formcontrolへの入力値を角度でバインドする方法は？

Question

私はネストされたフォームコントロールを持っています（デフォルトでは2つの入力ボックスですが、さらに追加できます）。値は値の配列（ループ）から設定されます。これらの値はフォームコントロールにバインドできません。これらは、その構成要素の一部である

form: { "title": null, "metaDescription": "", "singleImageUploadsImageName": "", "multipleImageUploadsImageName": [], "unDevelopmentGoals": "", "mainEditor": "", "introduction": null, "experiencecategory": "", "dayanddescriptions": [ { "description": "" }, { "description": "" } ], "hashtags": "" } 

ここ

<div formArrayName="dayanddescriptions"> 
    <div class="panel panel-default" *ngFor="let dayAndDescription of this.createFormService.formGroup.controls.dayanddescriptions.controls; let i = index" > 
     <div class="panel-heading"> 
      <span>Day {{i + 1}}</span> 
      <span class="glyphicon glyphicon-remove pull-right" *ngIf="i>0" 
        (click)="removeDayandDescription(i)">      
      </span> 
     </div>   
     <div class="panel-body" [formGroupName]="i"> 
      <!--Day--> 
      <div class="form-group col-xs-4" > 
       <label for="text">Day</label> 
       <input type="text" class="form-control" formControlName="day" value="{{i + 1}}" readonly>      
      </div> 
      <!--Description--> 
      <div class="form-group col-xs-4"> 
       <label>Description</label> 
       <input type="text" class="form-control" formControlName="description"> 
      </div>       
     </div> 
    </div> 
</div> 

は、JSONの私のフォームの値である

plunker

以下の私のコードを見てください、、、

initDayandDescription() {  
     return this.createFormService._formBuilder.group({ 
      day: ['', Validators.required], 
      description: [''], 
     }); 
    }  
    createForm() { 
     this.formService.buildForm(this.createFormService._formBuilder.group({ 
      title: [null, Validators.compose([Validators.required, Validators.minLength(20), Validators.maxLength(64)])], 
      metaDescription: '', 
      singleImageUploadsImageName: '', 
      multipleImageUploadsImageName: '', 
      unDevelopmentGoals: '', 
      mainEditor: '', 
      introduction: [null, Validators.compose([Validators.required, Validators.minLength(50), Validators.maxLength(124)])], 
      experiencecategory: '', 
      dayanddescriptions: this.createFormService._formBuilder.array([ 
       this.initDayandDescription(), 
      ]),   
      hashtags: '',   
     })); 
    } 

Answer 1

コードを少し変更するだけです！ :)代わり[value]を使用しての

、のではなく、一方向結合を使用してみましょう、これだけ[ngModel]で[value]を置き換える：

<input type="text" class="form-control" formControlName="day" 
    [ngModel]="i + 1" readonly> 

はあなたのPlunker