Angular2反应形式选择如何设置无效？

Question

我在我的应用中使用反应式表单。在某种形式中我想显示必需（Validators.required）选择如下：

<select class="form-control"
        [id]="dformControl.key"
        [formControlName]="dformControl.key"
        [multiple]="dformControl.multiple">

  <option *ngIf="!dformControl.value"
          value="undefined">
    Choose ...
  </option>

   <option *ngFor="let opt of dformControl.options"
          [value]="opt.value"
          [selected]="dformControl.value == opt.value">
    {{opt.label}}
  </option>

</select>

问题在于我是否使用value="undefined"或value=""表单控件仍然设置为有效，因为它有一个值。不要在value中显示value="Choose ..."属性结果。

我是否以错误的方式使用选择反应形式，或者我如何能够选择＆＃34;选择...＆＃34;不是有效 ??

Answer 1

将选择控件的初始值分配给null就可以了。请尝试以下，

  model_property = null

  ....
  this.fb.group({ 
  .... 
  'control_key'  :    [this.model_property, Validators.required]
  ...
  })

选中此Plunker!!，查看app/reactive/hero-form-reactive.component.ts文件。

我更新了Plunker以包含在下方，它似乎正在运作，

    <select id="power" class="form-control"
        formControlName="power" required >

        // see the value is set to empty,
        <option value="">Choose...</option>

        <option *ngFor="let p of powers" [value]="p">{{p}}</option>
    </select>

希望这会有所帮助!!

Answer 2

我所做的是添加一个空白选项，当选择该选项时，因为没有值，所以它无效。

<select class="form-control"
        [id]="dformControl.key"
        [formControlName]="dformControl.key"
        [multiple]="dformControl.multiple">

  <option></option>
   <option *ngFor="let opt of dformControl.options"
          [value]="opt.value"
          [selected]="dformControl.value == opt.value">
    {{opt.label}}
  </option>
</select>