how to bind input value to the formcontrol in angular?

Question

i have a nested form control(two input box by default but can add more), the values are set from an array of values(loop). These values cannot bind to the form control.

plunker

Please have a look at my code below,

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

here is my form value in json,

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

these are the part of its component ,

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

We just need to do a minor change to the code! :)

Instead of using [value], let's use one-way-binding instead, so just replace [value] with [ngModel]:

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

Your forked Plunker