简体   繁体   English

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,但我手动填写了俱乐部名称,以表明他们为哪个俱乐部效力。

表格

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.

相关问题 如何禁用同一 HTML(Angular 9)中的文本区域或 mat-form-field - How to disable a text area or mat-form-field in the same HTML (Angular 9) HTML表单字段未显示触摸状态-Angular 7 - HTML Form field not showing touched status - Angular 7 如何在 angular 的表单域中给出固定文本? - How to give fixed text in the form field in angular? 如何以角度形式关联文本字段和复选框 - How to associate text field and checkbox in angular form 延迟 Angular 表单中的文本字段验证消息 - Delay text field validation message in Angular form 使用Angular时,HTML“值”字段未预填充表单 - HTML “value” field not pre-populating form when using Angular 多行上的角度材料垫形式字段占位符文本 - Angular Material mat-form-field Placeholder text on multiple lines 如何在焦点反应形式文本字段上打开角度模态? - How to open angular modal on focus reactive form text field? 如何在Angular中将html的文本域变量传递给typescript? - How to pass variable of text field of html to typescript in Angular? 基于另一个文本字段的有效性,角反应形式[disabled]属性不适用于该文本字段 - Angular reactive form [disabled] attribute doesn't work for text field based on validity of another text field
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM