How to bind an input value to a control form in angular?

I have a nested form control (two input fields each by default, but more can be added), the values โ€‹โ€‹are set from an array of values โ€‹โ€‹(loop). These values โ€‹โ€‹cannot bind to a form control.

plunker

Please see 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": "" }

      

it is 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: '',           
        }));
    } 

      

+3


source to share


1 answer


We just need to make minor changes to the code! :)

Use [value]

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

+2


source







All Articles