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>
3
  • 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. Jul 20, 2017 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, 2017 at 18:53
  • It's refreshing to see a question written so clearly. Kudos.
    – JGFMK
    Jul 20, 2017 at 20:57

1 Answer 1

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.

1
  • 1
    The attribute is readonly. The 'O' should not be capital letter Jul 7, 2020 at 10:27

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.