7

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: '', })); }
Improve this question
14
  • so you have default values that you want to insert? Question is a bit unclear, best would be if you could create a plunker :) Commented Apr 26, 2017 at 10:44
  • When you type in any input boxes, these values are immediately reflected in form value. For one of the input box, a value is assigned like below, <input type="text" class="form-control" formControlName="day" value="{{i + 1}}" readonly>.. This value is reflected in the text box but not in the form value Commented Apr 26, 2017 at 11:04
  • When you type in any input boxes, there values are immediately reflected in form value. Okay so what do you want it to do when you type values? Commented Apr 26, 2017 at 11:13
  • But it is not reflected here form: { "title": null, "metaDescription": "", "singleImageUploadsImageName": ""} Commented Apr 26, 2017 at 11:14
  • Okay, now I understand :) Could you please add how you are building the form in your component? Commented Apr 26, 2017 at 11:20

1 Answer 1

Reset to default
7

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks. I din try that.
You are welcome, sorry it took a while, I just had trouble understanding what was going on. Seeing all the code cleared it right out. Have a great day and happy coding! :)
great day and happy coding to you too :)
Deprecated now angular.io/api/forms/FormControlName#use-with-ngmodel