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.
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
user7924031
source
to share