添加占位符以在angular2中选择标记

发布时间：2020-12-17 08:02:57 所属栏目：安全来源：网络整理

导读：我有一个只包含表单的简单组件： import {Component,FORM_DIRECTIVES,NgFor} from 'angular2/angular2';@Component({ selector: 'test-component',directives: [FORM_DIRECTIVES,NgFor],template: ` form class="form-inline" (ng-submit)="onSubmit()" #for

我有一个只包含表单的简单组件：

import {Component,FORM_DIRECTIVES,NgFor} from 'angular2/angular2';


@Component({
  selector: 'test-component',directives: [FORM_DIRECTIVES,NgFor],template: `
    <form class="form-inline" (ng-submit)="onSubmit()" #form="form">
      <div class="form-group">
        <select class="form-control" 
          [(ng-model)]="model.server" 
          ng-control="server" 
          #server="form" 
          required>
          <option selected hidden>placeholder</option>
          <option *ng-for="#server of servers" 
            [value]="server">{{ server | uppercase }}
          </option>
        </select>
      </div>
      <div class="form-group">
        <input class="btn btn-primary" type="submit" value="Load"
          [disabled]="!form.form.valid">
      </div>
    </form>
  `
})
export class TestComponent {
  public model: Model = new Model();
  public servers: string[] = ['a','b','c'];

  onSubmit(): void {
    // Complicated logic.

    // Reset form.
    this.model.reset();
  }
}

class Model {
  constructor(
    public server: string = ''
  ) { }

  reset(): void {
    this.server = '';
  }
}

我想为我的选择创建“占位符”,但是ng-model会覆盖所选属性,导致根本没有选择的选项.任何sugestions？我正在使用角度2.0.0-alpha.48.

我通过执行以下操作来实现此目的：

enter code here

<div class="form-group">
  <label for="metricsType">metrics type</label>
  <select id="metricsType" class="form-control" required [(ngModel)] ="model.metrics.type">
     <option value="" disabled="true" [selected]="!model.metrics.type">--please select--</option>
     <option *ngFor="let item of metricTypes" [value]="item.value">{{item.label}}</option>
  </select>
 </div>

然后使用css ng-pristine进行样式设计

select {
 border: 1px solid transparent;
  &.ng-pristine{
    font-style: italic;
    color: darken($white,50%);
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!