Angular 2 HTML表单文本字段 [英] Angular 2 HTML Form Text Field

问题描述

我想知道以下情况是否可行，正如您从我的第一个屏幕截图中看到的那样，我正在向正在运行的火力基地添加一个足球运动员列表，但是我手动填写了俱乐部名称，以指明他们参加的俱乐部

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.

我有一个下拉框，其中列出了我用于Firebase的cluKey的所有俱乐部，因此我的想法是从下拉框中选择的内容预先填充俱乐部名称文本字段，并且它因此不可编辑，这是否有可能实现.

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.

这是我要填充的行

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

我的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>

推荐答案

input元素，确实具有 readonly 属性.您应该能够有条件地进行设置.将其与反应形式一起使用.

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.

这篇关于Angular 2 HTML表单文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！