опция выбора со значением по умолчанию, неопределенным с обязательным атрибутом, не работает, но значение пустое

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», иначе она не будет отображаться как выбор по умолчанию вместо пустойselection.

Даже если поле помечено как обязательное, при отправке формы обязательное заполнение не будет отображаться, как для

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

, что является поведением по умолчанию в html 5:

Для обхода проверки дескриптора при отправке формы, но на этот раз будут проверены первые обязательные поля, но, наконец, поле страны.

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

Что можетбыть решением для поля с [value] = "undefined" и показать "Пожалуйста, сначала выберите элемент" alert?

См. раздвоенную скрипку от Daniel's

Answer 1

Установка значения состояния выбора для пустой строки <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 2

У меня тоже была такая же проблема, с помощью следующего я решил эту проблему

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