Angular 2 HTML Form Text Field

Question

I'm wondering if the following is possible, as you can see from my first screen shot I'm adding a list of football players to firebase which is working but I manually fill out the Club Name which indicate which club they play for.

I have a drop-down box where all the clubs are listed which I use for the cluKey for Firebase, so my thinking was to have the Club Name text field pre populated from whatever was selected from the drop down box and also have it so it's not editable, is this possible to achieve.

This is the line I would like to populate

<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

input element , does have a readonly attribute. You should be able to conditionally set that. Use that with Reactive Forms.

In trying to elaborate on that I was unsure of best answer. See my associated question here . It may help you.