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>

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
– Heretic Monkey, Commented Jul 20, 2017 at 18:34
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
– Osman Cea, Commented Jul 20, 2017 at 18:53
It's refreshing to see a question written so clearly. Kudos. — JGFMK
– JGFMK, Commented Jul 20, 2017 at 20:57

JGFMK · Accepted Answer · 2020-07-07 11:38:08Z

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.

edited Jul 7, 2020 at 11:38

answered Jul 20, 2017 at 20:53

JGFMK

8,9974 gold badges65 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pieter Buys Over a year ago

The attribute is readonly. The 'O' should not be capital letter

Collectives™ on Stack Overflow

Angular 2 HTML Form Text Field

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related