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

问题描述：

我在我的应用程序中使用反应形式。在一定的形式我想显示需要（Validators.required）选择这样的：Angular2反应形式选择如何设置无效？

<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 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 https://plnkr.co/edit/OaMTzUbUzsh6pPyRptNP?p=preview这里是一个plunkr看看它是如何表现的，它是反应形式的HTML。 –

答

将选择控制的初始值分配给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'没有任何区别。最初，表单控件在两种方式中均设置为无效。我的意思是，如果我将选择更改为某个选项，然后切换回选项**选择... **表单控件仍然有效 –

@MaxSolid：更新了Plunker，不确定它是否是您的场景正在谈论。如果不是，你可以尝试更新Plunker来重现你的场景。 –

似乎我遇到的问题与'[multiple] =“dformControl.multiple”'有关。在我删除这行后，所有的工作都应该如此。 'dformControl.multiple'未定义，'multiple'没有添加到'

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

相关推荐