How can I have an array in input form?

Question

I have a form with some input in a loop with lang and when I submit the form, the name of the input is a string rather than an object. Is it possible to return an object or what's the best way to create this object to send to an api?

My template

<form class="kt-form" (ngSubmit)="onSubmit(f)" #f="ngForm">     
   <label>Name</label>
   <input *ngFor="let lang of aLang" 
      type="text" 
      class="form-control"
      name="translations.{{lang}}.name" 
      ngModel
   >
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

In my component

onSubmit (form: NgForm){
   let datas = form.value; 
   console.log(datas);
}

Now, I have this result:

Object { "translations.fr.name": "", "translations.nl.name": "", "translations.en.name": "" }

Thanks for your help !

You want the name to be equal to value of translations.{{lang}}.name or this as a string? — joka00
– joka00, Commented May 23, 2019 at 9:49
Can you explain your use case? You can send objects via POST-Method to an API. That is no problem. Afterall no matter what object will come from your #form you are free to create your own objects. Inputs always get a name as string and will be paired with the value you entered in an Object as you seen in your result. — liqSTAR
– liqSTAR, Commented May 23, 2019 at 9:50
@JosefKatič I would like have an object and not a string so ["translations": {"fr" : { "name":"value fr"}}}, {"translations": {"nl" : { "name":"value nl"}}}, {"translations": {"en" : { "name":"value en"}}}} — dagda_01
– dagda_01, Commented May 23, 2019 at 10:30
@liqSTAR yes I can create my object in the submit function before sent it to api but it would like to know if it's possible to have automatically an object since the form — dagda_01
– dagda_01, Commented May 23, 2019 at 10:32
Ah now i get it after you showed us your prefered form. Thats not possible without after editing. — liqSTAR
– liqSTAR, Commented May 23, 2019 at 10:38

Bar Gans · Accepted Answer · 2019-05-23 09:34:52Z

3

If I correctly understood the question, you should only send the language to the API. Therefore, change the HTML to:

 <form class="kt-form" (ngSubmit)="onSubmit(f)" #f="ngForm">     
   <label>Name</label>
   <input *ngFor="let lang of aLang" 
      type="text" 
      class="form-control"
      name="{{lang}}" 
      ngModel
   >
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

answered May 23, 2019 at 9:34

Bar Gans

1,6832 gold badges13 silver badges26 bronze badges

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

1 Comment

dagda_01 Over a year ago

Thanks for reply but I need an object with this structure of my input name because I have some other input with the same problem.

joka00 · Accepted Answer · 2019-05-23 09:55:18Z

0

If I understand it right then you want something like this.

   <input *ngFor="let lang of aLang" 
      type="text" 
      class="form-control"
      [attr.name]="lang.name" 
      ngModel>

[] these bracket's will make the attribute bindable so you can assing value from array or object. The attr. symbols that it's no an Angular @Input() property but a normal HTML attribute.

answered May 23, 2019 at 9:55

joka00

2,5771 gold badge12 silver badges29 bronze badges

1 Comment

dagda_01 Over a year ago

Hi, thanks but I must be use name attribute or I have an Angular error: ERROR Error: "If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Collectives™ on Stack Overflow

How can I have an array in input form?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related