CODEWITHSUNDEEP
jqueryhtmlangular
Rupesh
Rupesh

Reputation: 890

Submit array Value from dynamic input field in angular 4

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.

Upvotes: 1

Views: 310

Answers (1)

Rub&#233;n Soler
Rub&#233;n Soler

Reputation: 1187

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

Upvotes: 1

Related Questions