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

标签 javascript angular angular-ngmodel


我正在创建一个具有一些选择和一些输入类型的表单,如下所示。

    <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>

我有两个主要问题:

  1. 我需要设置 value关于输入类型,但它不起作用。我知道我应该使用类似 ngValue 的东西,或者至少我在网上读到过,但大多数示例都引用 angularjs我有点困惑。如果我简单地输入 [ngValue]="richiesta.prova"浏览器提示 Can't bind to 'ngValue' since it isn't a known property of 'input' .
  2. 我需要出示 placeholder对于选择,但自第一个 <option> 以来它就不起作用与所有其他列表一样,是下拉列表的一部分。对此我没有任何线索,因为它应该按原样工作。

任何帮助将不胜感激,也许需要一些解释,我感觉我缺少一些关于 Angular 绑定(bind)的东西。
谢谢。

最佳答案

1) NgModel 设置值。如果 model[d.name] 不为空 - 它将被设置。
https://angular.io/guide/forms
2) How to show placeholder (empty option) in select control in Angular 2?
这两行是多余的:
(focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder"

关于javascript - Angular - 输入值和选择占位符不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45844117/

相关文章:

asp.net-mvc - Angular 2 (SystemJS) XHR 错误(未找到 404)/@angular/animations

javascript - 当输入集中时,不会更新 ng-model

javascript - wait 在表达式和语句中的行为是否相似?

javascript - 有没有办法获取 JS 实例中的所有库对象?

javascript - 如何在充满 ng-options 的 Angularjs 选择中预先选择一个选择选项

javascript - 根据从下拉列表中选择的选项渲染模板

typescript - 使用数字管道抛出 InvalidPipeArgumentException(管道 '1' 的无效参数 'DecimalPipe')

javascript - 从 Object.key 的结果中切片 []

javascript - $ionicPopup templateUrl 内的 ng-model 不适用于范围

Angular 2 : use [(ngModel)] with [ngModelOptions] ="{standalone: true}" to link to a reference to model's property