Creating an array from a form using Angular, HTML, Typescript

Question

I have a database that stores information about dishes of a gastronomy and the customer orders.

I want to write a form that allow the user-admin to insert the data about a plate, with name, ingredients and allergens. The last two accepts multiple values.

I'm using a formGroup that contains (for now):

          <mat-card class="container"  fxLayout.xs="column" >
            <form [formGroup]="piattoFormGrp" (ngSubmit)="onSubmit()" >
              <p>
                <mat-form-field>
                    <input formControlName="nome" matInput placeholder="Nome del piatto" value="">
                    <mat-hint>Es: spaghetti allo scoglio</mat-hint>
                  </mat-form-field>
              </p>
              ... 
              <button mat-raised-button type="submit" >Inserisci</button>
            </form>
          </mat-card>

Can you suggest me which type of input I should use to store data of multiple ingredients? I have to create an array with this values in order to use it with typescript and send it to my database with php. How can I do it?

In my angular project, I could manage this information with this model:

export class Piatto{
NomeP !: string;
Tipo !: string;
Ingredienti !: Array<any>;
Allergeni !: Array<any>;}

I've already used it to store data from server and put them into a table with ngFor*.

We have no idea if ingredients exist, that user can pick from, or does the user themself type ingredients? Either way, as you are using reactive form, use a FormArray to do it. — AVJT82
– AVJT82, Commented May 28, 2021 at 17:13
@AJT82 the user type the name of ingredients, my code check for each one if the ingredient already exists. If it doesn't exist, it saves it. I could consider to give the possibility to pick on from ingredients that already exists, with a suggestion list. — Davide
– Davide, Commented May 28, 2021 at 17:38

user9721056user9721056 · Accepted Answer · 2021-05-28 19:42:35Z

1

I would suggest using the 'select' element from angular material with multiple selections.

You can set a default ingredients list as drop-down options and add an input field at the end of the options. User can use that field to enter new ingredient which doesn't exist.

You can check this example: https://stackblitz.com/edit/angular-wbgxr9?file=src/app/select-multiple-example.html

answered May 28, 2021 at 19:42

user9721056

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

1 Comment

Davide Over a year ago

I'm using your example and works. However there is only one problem: the ingredient I insert in the matInput doesn't appear in the list of ingredients selected.

Collectives™ on Stack Overflow

Creating an array from a form using Angular, HTML, Typescript

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