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

Question

我在我的应用程序中使用响应式表单。在某种形式下，我想显示一个 required (Validators.required) select 像这样：

<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 与反应形式一起使用，或者我如何才能使选项 "Choose ..." 不有效？

Answer 1

将 select 控件的初始值分配给 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>

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

Angular2 reactive forms select how to set invalid?

forms

select

reactive

angular