Angular 2 HTML 表單文本字段

Question

我想知道以下是否可行，正如您從我的第一個屏幕截圖中看到的那樣，我正在將足球運動員列表添加到正在運行的 firebase，但我手動填寫了俱樂部名稱，以表明他們為哪個俱樂部效力。

我有一個下拉框，其中列出了我用於 Firebase 的 cluKey 的所有俱樂部，所以我的想法是從下拉框中選擇的任何內容中預先填充俱樂部名稱文本字段，並讓它如此不可編輯，這是否可以實現。

這是我想填充的行

<input type="text" placeholder="Club Name" #clubName>

我的 HTML

<!--START ADD FORM-->
<div *ngIf="appState == 'add'" class="row">
  <div class="large-12 columns">
    <h3>Add Player</h3>
    <form (submit) ="addPlayer(
      playerFirstName.value,
      playerLastName.value,
      clubName.value,
      clubKey.value)">
      <div class="row">
          <div class="large-6 columns">
            <label> Player First Name
              <input type="text" placeholder="Player First Name" #playerFirstName>
            </label>
          </div>  
           <div class="large-6 columns">
            <label>Club
              <select #clubKey>
                <option value="0">Select</option>
                <option *ngFor="let club of clubs" value="{{club.$key}}">{{club.clubName}}</option>
              </select> 
             </label>
          </div>   
        </div>

        <div class="row">
          <div class="medium-6 columns">
            <label>Player Last Name
              <input type="text" placeholder="Player Last Name" #playerLastName>
            </label>
          </div>
           <div class="medium-6 columns">
            <label>Club Name
                <input type="text" placeholder="Club Name" #clubName> 
            </label>
          </div> 
        </div>

Answer 1

input 元素，確實有一個readonly屬性。 您應該能夠有條件地設置它。 將其與 Reactive Forms 一起使用。

在試圖詳細說明這一點時，我不確定最佳答案。 在此處查看我的相關問題。 它可能會幫助你。