亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular Reactive Forms 多文件上傳

Angular Reactive Forms 多文件上傳

慕仙森 2023-04-14 17:29:09
我有兩個不同文件的輸入標簽,例如一個用于圖像,下一個用于表單內的 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>
查看完整描述

1 回答

?
胡說叔叔

TA貢獻1804條經驗 獲得超8個贊

您的 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">

如您所知,一旦關聯,您的標簽將與單擊時的文件輸入相同?,F在假設我們有兩個輸入,我們將它們定義如下:


<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?,F在發生的是,當您單擊第二個標簽(PDF 輸入)時,它將代表imageInput輸入而不是pdfInput.


進一步閱讀:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label


查看完整回答
反對 回復 2023-04-14
  • 1 回答
  • 0 關注
  • 106 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號