Question

我有一个国家/地区下拉列表

<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”并显示“请先选择一个项目”警报的字段，该怎么办？

请参阅丹尼尔的forked fiddle

Answer 1

要设置所选的占位符值，请将模型的状态设置为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' }
];

Have a look at this StackBlitz example!

Answer 2

将选择状态值设置为空字符串<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>

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

默认值为undefined且带必需属性的select选项不起作用，但值为空

3 个答案: