Creating Dynamic text-box in Angular 8 and binding the value to component while form submit

Question

I am trying to add a Dynamic text box when a button is pressed.The dynamic text box is added successfully but unable to grab all the values (dynamically added textbox's value) while form submit.it always bind the last updated text box's value. Following is my code snippet

contribute.component.ts

export class ContributeComponent implements OnInit {
categories = [];
contribute = {};
private options = [{ value: '' }];
private contributeForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
this.contributeForm = this.formBuilder.group({
  question: new FormControl(),
  category: new FormControl(),
  options: new FormControl()
});
add() {
this.options.push({ value: this.contributeForm.controls.options.value });
}

and in my html file contribute.component.html

<form [formGroup]="contributeForm" (ngSubmit)="onSubmit(contributeForm.value)">
<div class="form-group">
                <label class="control-label col-sm-2" for="message">Options:</label>
                <div class="col-sm-10 inputGroupContainer">
                    <div *ngFor="let option of options; let in=index" class="spacer">
                        <div class="input-group">
                            <span class="input-group-addon">Option {{in+1}}</span>
                            <input type="text" class="form-control" rows="4" placeholder="Type your option here"
                                formControlName="options" name="option" [value]="options[in].value"/>
                        </div>
                    </div>
                </div>

                <div class="row"></div>

                <div class="col-sm-12 pull-right">
                    <div class="col-sm-4"></div>
                    <div class="col-sm-4">
                        <button class="btn btn-warning" type="button" (click)="add()">Add option <span
                                class="glyphicon glyphicon-send"></span>
                        </button>
                    </div>
                    <div class="col-sm-4"></div>
                </div>
            </div>

ViqMontana · Accepted Answer · 2019-10-30 09:15:56Z

1

I think you're confused as to how this should be working. Your contributeForm only has a single options field so you can only bind a single value to this...perhaps you'd like to make this an array.

Every time the add() functions is called, it'll get the current value for options. options is only bound to a single text box, which will be the last created one, i.e. the bottom text box. So each time you add a new options, the newest option text box will be bound to options.

Take a look at this StackBlitz and look at this console each time you add a new option.

answered Oct 30, 2019 at 9:15

ViqMontana

5,7384 gold badges26 silver badges62 bronze badges

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

1 Comment

abin peter Over a year ago

I got your point, Then how can i get each value correctly into an array while submitting the form.I am new to Angular,trying to find a solution

Collectives™ on Stack Overflow

Creating Dynamic text-box in Angular 8 and binding the value to component while form submit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related