0

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.

Form

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>

Pre Populated

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>
CodeWarrior
  • 2,281
  • 2
  • 16
  • 18
Chet
  • 59
  • 1
  • 11
  • Yes it is possible to achieve this. In both AngularJS 1.x, which you tagged this question as, and Angular 2+, which is what your tile and code appear to be about. – Heretic Monkey Jul 20 '17 at 18:34
  • 2
    You should use Template Forms or Reactive Forms, so you can basically watch changes in your select form control and set the selection value to your input. – Osman Cea Jul 20 '17 at 18:53
  • It's refreshing to see a question written so clearly. Kudos. – JGFMK Jul 20 '17 at 20:57

1 Answers1

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.

JGFMK
  • 7,107
  • 4
  • 46
  • 80