無效表單驗證將選擇輸入框的默認「選擇」值視爲有效

當沒有選定值時，我一直在努力驗證具有默認「選擇」選項的無效表單。如果表單中存在一個值，那麼我需要選擇相應的值。無效表單驗證將選擇輸入框的默認「選擇」值視爲有效

我使用的反應形式和下面是我的代碼實現：

<select class="form-control" formControlName="environment" > 
    <option disabled [value]="null">-- Select --</option> 
    <option *ngFor="let ami of envs" [value]="ami.amiid"> 
     {{ami.name}} 
    </option> 
</select>

this.onlineTestForm = this._fb.group({ 
      . 
      .  
      environment: ['', Validators.required], 
      . 
      .   
     }); 

//value is present in the model 
(<FormControl>this.onlineTestForm.controls['environment']) 
      .setValue(this.model.environment, { onlySelf: true }); 

//value is not present in model 
(<FormControl>this.onlineTestForm.controls['environment']) 
      .setValue('null', { onlySelf: true });

有沒有更好的方式來實現上述？

來源

2017-07-28 Villie

也許這將幫助，https://stackoverflow.com/questions/39724161/angular- 2-set-default-value-to-select-option？rq = 1 – arodjabel

我的回答是怎麼回事？它是否適合您的需求或...？ :) – Alex

你的問題是在這裏：

(<FormControl>this.onlineTestForm.controls['environment']) 
     .setValue('null', { onlySelf: true });

要設置字符串價值'null'代替null。字符串'null'當然是一個有效的值。

而且要設置一個完整的對象作爲表單控件的值，如果它存在，即使environment預計只是ID，至少你在模板中指定：

[value]="ami.amiid"

我在這裏看到兩個選項來「改善」你的代碼。這取決於this.model是否異步獲取值。如果你知道this.model在初始化值，你可以簡單地這樣做：

environment: [this.model.environment || null, 
       Validators.required]

在這裏，我們必須記住初始化model爲空對象，這樣的undefined錯誤不會在情況下被拋出有model沒有任何價值。

如果model值設置異步，使用setValue設定值，一旦你得到它：

this.onlineTestForm.controls.environment.setValue(...)

來源

2017-07-29 08:25:31 Alex

無效表單驗證將選擇輸入框的默認「選擇」值視爲有效

回答

相關問題