选择具有未定义默认值且必需属性的选项不起作用但值为空

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" 的字段并显示“请先选择一个项目”警报的解决方案是什么？

查看 Daniel's 的 forked fiddle

Answer 1

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

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

Answer 2

要为您的选择设置占位符值，请将模型的状态设置为 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 3

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