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屬性結果。

我是否以錯誤的方式使用反應形式的選擇，或者我將如何使選項「選擇...」不是有效？

來源

2017-03-28 Max Solid

我所做的是添加一個空白選項，當它被選中，因爲沒有值，它是無效的。

<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>

來源

2017-03-28 17:26:53

有點奇怪的原因，即使沒有爲我做伎倆..切換到一個有效的選項切換回空白選項離開窗體控制狀態有效 –

@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>

希望這有助於！

來源

2017-03-28 17:08:49

對初始值使用''''或'null'沒有任何區別。最初，表單控件在兩種方式中均設置爲無效。我的意思是，如果我將選擇更改爲某個選項，然後切換回選項**選擇... **表單控件仍然有效 –

@MaxSolid：更新了Plunker，不確定它是否是您的場景正在談論。如果不是，你可以嘗試更新Plunker來重現你的場景。 –

似乎我遇到的問題與'[multiple] =「dformControl.multiple」'有關。在我刪除這行後，所有的工作都應該如此。 'dformControl.multiple'未定義，'multiple'沒有添加到'

Angular2反應形式選擇如何設置無效？

回答