Submit array Value from dynamic input field in angular 4

Question

I am just trying where I can add and delete multiple input field. So when user submit on two or more field, its gives result in array.

my html form

    <form method="post" [formGroup]="formData">
         <div class="form-group">
            <label for="course">Enter Subject Name</label>
            <fieldset [formControl]="subjectControl">
              <input type="text" name="name[]"  multiple class="form-control" id="course" placeholder="subject name" />
              <br />
            </fieldset>
            <button id="addMore">Add more fields</button>
          </div>
          <button (click)="dataSubmit()" type="submit" [disabled]="" class="btn btn-primary">Submit</button>
    </form>

and jquery code

$('#addMore').click(function(e) {
        e.preventDefault();
        $('fieldset:last').after('<fieldset><input [formControl]="subjectControl" type="text" name="name[]" ' +
          'multiple class="form-control" id="course" ' +
          'placeholder="subject name" /><br/></fieldset>');
      });

But the problem is that on submiting form, it is giving only value from first input.

Rubén Soler · Accepted Answer · 2018-07-31 20:52:04Z

1

You should to use Angular DynamicForms, instead of JQuery way, because maybe this way is okay in the view/template but angular don't knows what are the new form fields.

Have got more information about that here: https://angular.io/guide/dynamic-form

Another way is plays with the ReactiveForms building a FormArray and method to add FormControl objects in that array, you can paint it in the view using the traditional angular directives later like *ngFor and bind the values in the FormGroup using formControlName attribute for example.

I hope I served you

Working example

https://stackblitz.com/edit/angular-dynamic-form-fields

edited Jul 31, 2018 at 20:52

answered Jul 31, 2018 at 20:14

Rubén Soler

1,1879 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Submit array Value from dynamic input field in angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related