forms - 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 ..."。

我是否以错误的方式使用带有反应形式的选择，或者我如何才能使“选择...”选项无效？

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>