使用 Angular、HTML、Typescript 从表单创建数组答案

【问题标题】：Creating an array from a form using Angular, HTML, Typescript使用 Angular、HTML、Typescript 从表单创建数组
【发布时间】：2021-08-16 22:10:00
【问题描述】：

我有一个数据库，用于存储有关美食菜肴和客户订单的信息。

我想编写一个表单，允许用户管理员插入有关盘子的数据，包括名称、成分和过敏原。最后两个接受多个值。

我正在使用一个包含（目前）的 formGroup：

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

您能否建议我应该使用哪种类型的输入来存储多种成分的数据？我必须用这个值创建一个数组，以便将它与 typescript 一起使用，并用 php 将它发送到我的数据库。我该怎么做？

在我的 Angular 项目中，我可以使用这个模型来管理这些信息：

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

我已经用它来存储来自服务器的数据，并使用 ngFor* 将它们放入一个表中。

【问题讨论】：

我们不知道成分是否存在，用户可以从中挑选，还是用户自己输入成分？无论哪种方式，当您使用响应式表单时，请使用 FormArray 来执行此操作。
@AJT82 用户输入成分的名称，如果成分已经存在，我的代码会检查每一个。如果它不存在，它会保存它。我可以考虑提供从已经存在的成分中挑选的可能性，并附上建议列表。

标签： html angular typescript forms

【解决方案1】：

我建议使用带有多个选择的角度材料中的“选择”元素。

您可以将默认成分列表设置为下拉选项，并在选项末尾添加一个输入字段。用户可以使用该字段输入不存在的新成分。

您可以查看此示例：https://stackblitz.com/edit/angular-wbgxr9?file=src/app/select-multiple-example.html

【讨论】：

我正在使用您的示例并且有效。但是只有一个问题：我在 matInput 中插入的成分没有出现在所选成分列表中。