Angular 2 HTML Form Text Box

Question

I am wondering if the following is possible, as you can see from my first screenshot. I add the list of players to the work base, but I manually fill in the name of the club, which indicates which club they play.

I have a drop-down list that lists all the clubs I use for cluKey for Firebase, so I thought the Club Name text box was pre-populated from what was selected from the drop-down list, and also so that it cannot be edited, it can be achieved.

This is the line I would like to fill

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

My 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

, readOnly. . .

, . . . .