CODEWITHSUNDEEP
htmlangulartypescriptforms
Davide
Davide

Reputation: 103

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

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*.

Upvotes: 0

Views: 194

Answers (1)

user9721056
user9721056

Reputation:

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

Upvotes: 1

Related Questions