Angular Reactive Forms 多文件上传

Question

我有两个不同文件的输入标签，例如一个用于图像，下一个用于表单内的 pdf 文件，用于验证一切都按预期工作，但最后一个输入标签始终为空，如果我删除一个，则表单无效输入标签然后它按预期工作。

<form

        enctype="multipart/form-data"

        [formGroup]="reactiveForm"

        (ngSubmit)="submit()"

      >

        <h3>Add New Magazine</h3>

        <div class="form-group p-2">

          <label for="exampleInputEmail1">Magazine Name</label>

          <input

            type="email"

            name="email"

            class="form-control"

            placeholder="Magazine Name"

            required

            formControlName="magazineName"

          />

        </div>

        <div class="form-group p-2">

          <label for="exampleInputEmail1">Magazine Month & year</label>

          <br />

          <div class="input-group">

            <input

              class="form-control"

              placeholder="yyyy-mm-dd"

              name="dp"

              ngbDatepicker

              formControlName="publishDate"

              #d="ngbDatepicker"

            />

            <div class="input-group-append">

              <button

                class="btn btn-outline-secondary"

                (click)="d.toggle()"

                type="button"

              >

                <i class="fa fa-calendar-o" aria-hidden="true"></i>

              </button>

            </div>

          </div>

        </div>

        <div class="form-group p-2">

          <label for="exampleInputEmail1">Magazine Brand</label>

          <br />

          <div class="form-group">

            <select

              class="custom-select"

              required

              formControlName="magazineBrand"

            >

              <option value="">Open this select menu</option>

              <option value="1">One</option>

              <option value="2">Two</option>

              <option value="3">Three</option>

            </select>

          </div>

        </div>

Answer 1

您的 PDF 文件输入标签使用与缩略图输入相同的 ID。为每个输入分配不同的 ID，然后分别将标签与它们相关联：<label&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="btn btn-outline-primary btn-sm btn-block"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for="my-file-selector">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formControlName="thumbnailFile"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="my-file-selector"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="file"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (change)="onFileSelected($event)"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="image"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accept="image/x-png,image/gif,image/jpeg"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style="display: none"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-upload" aria-hidden="true"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Browse: Upload a Photo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group p-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="exampleInputEmail1">Upload Magazine PDF</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="btn btn-outline-primary btn-sm btn-block"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for="my-file-selector2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formControlName="pdfFile"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="my-file-selector2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="file"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (change)="onPDFFileSelected($event)"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="image"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accept="image/x-png,image/gif,image/jpeg"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style="display: none"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-upload" aria-hidden="true"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Browse: Upload a Photo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </div>解释<label>可以与单个<input>直通for属性相关联，例如<label for="imageInput">Image Input</label><input id="imageInput">如您所知，一旦关联，您的标签将与单击时的文件输入相同。现在假设我们有两个输入，我们将它们定义如下：<label for="imageInput">Image Input</label><input id="imageInput"><label for="pdfInput">PDF Input</label><input id="pdfInput">每个输入都有唯一的 ID，并通过该 ID 关联一个标签。你得到错误的原因是因为你对两个标签使用了相同的 id，在我们的例子中：&nbsp; <label for="imageInput">Image Input</label><input id="imageInput"/><label for="imageInput">PDF Input</label><input id="pdfInput"/>请注意，这两个 for属性具有相同的值imageInput。现在发生的是，当您单击第二个标签（PDF 输入）时，它将代表imageInput输入而不是pdfInput.进一步阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label