Angular 2 HTML表单文本字段答案

【问题标题】：Angular 2 HTML Form Text FieldAngular 2 HTML表单文本字段
【发布时间】：2017-12-26 14:49:09
【问题描述】：

我想知道以下是否可行，正如您从我的第一个屏幕截图中看到的那样，我正在向 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>

【问题讨论】：

是的，这是可以实现的。在您将此问题标记为的 AngularJS 1.x 和 Angular 2+ 中，这就是您的磁贴和代码所涉及的内容。
您应该使用模板表单或响应式表单，这样您基本上可以在您的选择表单控件中观察变化并将选择值设置为您的输入。
看到一个问题写得如此清晰，令人耳目一新。荣誉。

标签： angular

【解决方案1】：

input element，确实有一个readonly 属性。您应该能够有条件地设置它。将其与响应式表单一起使用。

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

【讨论】：

该属性是只读的。 'O' 不应该是大写字母