Angular 2 HTML表单文本字段

Question

我想知道以下是否可行，你可以从我的第一个屏幕截图中看到我正在添加一个足球运动员列表到firebase正在运行，但我手动填写俱乐部名称，表明他们玩哪个俱乐部对

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

这是我要填充的行

<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 element，确实有一个readOnly属性。你应该能够有条件地设置它。将其与Reactive Forms一起使用。

在试图详细说明我不确定最佳答案时。请参阅我的相关问题here。它可能对你有帮助。