[英]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,但我手动填写了俱乐部名称,以表明他们为哪个俱乐部效力。
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.我有一个下拉框,其中列出了我用于 Firebase 的 cluKey 的所有俱乐部,所以我的想法是从下拉框中选择的任何内容中预先填充俱乐部名称文本字段,并让它如此不可编辑,这是否可以实现。
This is the line I would like to populate这是我想填充的行
<input type="text" placeholder="Club Name" #clubName>
My HTML我的 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 element , does have a readonly
attribute.input 元素,确实有一个readonly
属性。 You should be able to conditionally set that.您应该能够有条件地设置它。 Use that with Reactive Forms.将其与 Reactive Forms 一起使用。
In trying to elaborate on that I was unsure of best answer.在试图详细说明这一点时,我不确定最佳答案。 See my associated question here . 在此处查看我的相关问题。 It may help you.它可能会帮助你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.