1

我有一个国家的下拉列表

<select  #countryInput  name="country" [(ngModel)]="room.countryId"   required>
  <option   [selected] [value]="undefined">Select Country</option>
  <option *ngFor="let c of countries" [value]="c.id">{{c.name}}</option>
</select>

为了“选择国家”选项，需要设置 [value]="undefined" 否则它不会显示为默认选择，而是显示为空选择。

即使标记的字段是必填字段，但在表单提交时不会显示为

<option value="">Select Country</option>

这是 html 5 中的默认行为：

在此处输入图像描述

作为处理表单提交验证的一种解决方法，但这次首先验证必填字段，最后验证国家/地区字段。

if (this.room.country == undefined) {
   alert('select country ');
   return false;
}

[value]="undefined" 字段的解决方案是什么并显示“请先选择一个项目”警报？

见丹尼尔的分叉小提琴

4

3 回答 3

3

我也有同样的问题，使用以下解决了我的问题

 <select class="o-field__input" [disabled]="isAnswerPresent" [(ngModel)]="inputValue" (change)="onAnswerChange()" required>
                <option [ngValue]="undefined">placeholder</option>

                <option [ngValue]="option" *ngFor="let option of optionSet;">option values</option>                     

            </select>
于 2019-06-05T14:52:40.257 回答
3

要设置您选择的占位符值，请将模型的状态设置为null并添加一个带有null值的选项。所需状态将null作为选项无效，这会将表单设置为无效，并将特定控件设置为无效。您可以以任何您想要的方式处理验证消息。

使用反应形式

在您的模板中

<form [formGroup]="form">
    <select [(ngModel)]="country" formControlName="country">
      <option [ngValue]="null">Choose a state</option>
      <option *ngFor="let option of items;"[ngValue]="option">{{option.name}}</option>
  </select>
</form>

在你的组件中

form = new FormGroup({
country: new FormControl(null, Validators.required)

使用模板驱动的表单

在您的模板中

<form #f="ngForm">
  <select name="countryTemplateForm" [ngModel]="countryTemplateForm" required>
    <option [ngValue]="null">Choose a country</option>
    <option *ngFor="let country of countries" [ngValue]="country">
      {{ country.name }}
    </option>
  </select>
</form>

在你的组件中

countryTemplateForm = null;
countries = [
  { name: 'USA'},
  { name: 'India' },
  { name: 'France' }
];

看看这个 StackBlitz 示例！

于 2019-02-07T10:29:25.343 回答
0

将选择状态值设置为空字符串<option value="">Choose a state</option>，并在ts文件中声明myDropDown为空字符串，将解决问题。

 myDropDown = '';

或者

 myDropDown= this.items[0].id;

html

 <form ngNativeValidate>
   <select [(ngModel)]="myDropDown"  (ngModelChange)="onChangeofOptions($event)" 
    required [ngModelOptions]="{standalone: true}">
     <option value="">Choose a state</option>
     <option *ngFor="let option of items;"[value]="option.id">{{option.name}}</option>
   </select>
   <input [hidden]="myDropDown !=='two'"type="text">
   <input type="submit" value="submit form">
  </form>
于 2019-02-07T10:48:11.467 回答