简体   繁体   English

Angular - 输入值并选择占位符不起作用

[英]Angular - input value and select placeholder not working


I'm creating a form that has some select and some input types, as shown below.我正在创建一个包含一些选择和一些输入类型的表单,如下所示。

    <div id="datiRichiesta">
            <div *ngFor="let d of formDatiRichiesta" class="form-row">

              <input *ngIf="d.type=='text'"
                     type="text"
                     class="form-control"
                     placeholder="{{d.placeholder}}"
                     [(ngModel)]="model[d.name]"
                     name="{{d.name}}"
                     (focus)="$event.target.placeholder = ''"
                     (blur)="$event.target.placeholder = d.placeholder"
                     value="richiesta.prova"/>

              <select *ngIf="d.type=='select'" 
                      class="form-control" 
                      name="{{d.name}}" 
                      [(ngModel)]="model[d.name]"
                      required>
                <option selected disabled value="">{{d.placeholder}}</option>
                <option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.nome}}</option>
              </select>

            </div>
      </div>

I've got two main issues:我有两个主要问题:

  1. I need to set a value on the input type, but it is not working.我需要在输入类型上设置一个value ,但它不起作用。 I know that I should use something like ngValue , or at least so I've read online, but most examples are referred to angularjs and I got a bit confused.我知道我应该使用类似ngValue东西,或者至少我在网上阅读过,但大多数例子都提到了angularjs ,我有点困惑。 If I simply put [ngValue]="richiesta.prova" the browser complains that Can't bind to 'ngValue' since it isn't a known property of 'input' .如果我简单地输入[ngValue]="richiesta.prova"浏览器会抱怨Can't bind to 'ngValue' since it isn't a known property of 'input'
  2. I need to show a placeholder for the select, but it's not working since the first <option> is part of the dropdown list as all the others.我需要为选择显示一个placeholder ,但它不起作用,因为第一个<option>与所有其他人一样是下拉列表的一部分。 On this I don't have a clue, because it should really work as it is.在这一点上我没有任何线索,因为它应该真的可以正常工作。

Any help will be appreciated, maybe with some explanation, I sense I'm missing something about angular binding.任何帮助将不胜感激,也许有一些解释,我觉得我错过了一些关于角度绑定的东西。
Thanks.谢谢。

1) NgModel sets the value. 1) NgModel 设置值。 If model[d.name] is not empty - it will be set.如果 model[d.name] 不为空 - 它将被设置。
https://angular.io/guide/forms https://angular.io/guide/forms
2) How to show placeholder (empty option) in select control in Angular 2? 2) 如何在 Angular 2 的选择控件中显示占位符(空选项)?
These 2 lines are redundant:这两行是多余的:
(focus)="$event.target.placeholder = ''" (focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder" (blur)="$event.target.placeholder = d.placeholder"

If your placeholder is not working then it simply means that you have assigned them some value to that input.如果您的占位符不起作用,则仅意味着您已为该输入分配了一些值。 In your case, I am 100% sure that {{ d.placeholder }} holds some value ( might be value equal to ' ').在你的情况下,我 100% 确定 {{ d.placeholder }} 拥有一些价值(可能是价值等于 ' ')。 Assign this value to NULL.将此值分配给 NULL。 Then see the result.然后看看结果。

placeholder="{{d.placeholder}}"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM