forms - Angular2 react 形式选择如何设置无效？

Question

我在我的应用中使用响应式表单。在某种形式下，我想显示一个required (Validators.required) select like this:

<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="Choose ..." 中显示 value 属性结果。

我是否以错误的方式将 select 与响应式(Reactive)表单一起使用，或者我如何才能使选项“选择...”不有效？

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>

希望这对您有所帮助!