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

【问题标题】：Angular2 reactive forms select how to set invalid?Angular2反应形式选择如何设置无效？
【发布时间】：2017-08-21 21:14:40
【问题描述】：

我在我的应用中使用响应式表单。在某种形式中，我想像这样显示 required (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="Choose ..." 中显示value 属性结果。

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

【问题讨论】：

标签： forms angular select reactive

【解决方案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>

希望这会有所帮助！

【讨论】：

使用'' 或null 作为初始值没有任何区别。最初，表单控件在两种方式中都设置为无效。我的意思是，如果我将选择更改为某个选项，然后切换回选项 Choose ... 表单控件仍然有效
@MaxSolid：更新了 Plunker，不确定是不是你所说的场景。如果不能，您可以尝试更新 Plunker 以重现您的场景。
似乎我遇到的问题与[multiple]="dformControl.multiple" 有关。在我删除这条线后，一切都按原样工作。 dformControl.multiple 未定义，multiple 未添加到 <select> 标记中。不知道为什么这对表单控件的状态有任何影响。

【解决方案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>

【讨论】：

一种奇怪的原因，甚至对我来说都不起作用..切换到有效选项切换回空白选项使表单控制状态有效
@MaxSolid 如果你只有 Validator.required 我不应该现在才测试。
@MaxSolid plnkr.co/edit/OaMTzUbUzsh6pPyRptNP?p=preview 这是一个 plunkr 看看它的行为方式，它是 html 的反应形式。