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

            class="btn btn-outline-primary btn-sm btn-block"

            for="my-file-selector">

            <input

              formControlName="thumbnailFile"

              id="my-file-selector"

              type="file"

              (change)="onFileSelected($event)"

              name="image"

              accept="image/x-png,image/gif,image/jpeg"

              style="display: none"/>

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

            &nbsp; Browse: Upload a Photo

          </label>

        </div>

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

          <label for="exampleInputEmail1">Upload Magazine PDF</label>

          <br />

          <label

            class="btn btn-outline-primary btn-sm btn-block"

            for="my-file-selector2"

          >

            <input

              formControlName="pdfFile"

              id="my-file-selector2"

              type="file"

              (change)="onPDFFileSelected($event)"

              name="image"

              accept="image/x-png,image/gif,image/jpeg"

              style="display: none"

            />

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

            &nbsp; Browse: Upload a Photo

          </label>

        </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，在我们的例子中：

  <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