Angular 2 HTML 表单文本字段

Question

我想知道以下是否可行，正如您从我的第一个屏幕截图中看到的那样，我正在将足球运动员列表添加到正在运行的 firebase，但我手动填写了俱乐部名称，以表明他们为哪个俱乐部效力。

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

这是我想填充的行

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

Answer 1

input 元素，确实有一个readonly属性。 您应该能够有条件地设置它。 将其与 Reactive Forms 一起使用。

在试图详细说明这一点时，我不确定最佳答案。 在此处查看我的相关问题。 它可能会帮助你。