Добавление formControlName приводит к исчезновению значения по умолчанию в раскрывающемся списке моей формы в Angular

У меня есть этот элемент выбора, и я вижу что-то странное, когда я добавляю formControlName в тег, начальное значение «месяц» не отображается, но если я его удаляю, он отображается, но не проверяется правильно, потому что он может " т связывать.

Вот моя форма и html

this.registerForm = this.fb.group({
  gender: ['male'],
  email: ['', [Validators.required, Validators.email]],
  username: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],

  month: ['', Validators.required],
  day: ['', Validators.required],
  year: ['', Validators.required],
  city: ['', Validators.required],
  country: ['', Validators.required],
  password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
  confirmPassword: ['', Validators.required]
}, {
  validator: this.passwordMatchValidator
});
<div class = "form-group col-4 col-sm-4 col-md-4">
  <select [ngClass] = "{'is-invalid': registerForm.get('month').errors && registerForm.get('month').dirty}" class = "form-control" id = "inputState1" formControlName = "month">
    <option disabled hidden selected>Month</option>
    <option>Jan</option>
    <option>Feb</option>
    <option>Mar</option>
    <option>Apr</option>
    <option>May</option>
    <option>Jun</option>
    <option>Jul</option>
    <option>Aug</option>
    <option>Sep</option>
    <option>Oct</option>
    <option>Nov</option>
    <option>Dec</option>
  </select>
  <div class = "invalid-feedback" *ngIf = "registerForm.get('month').dirty && registerForm.get('month').hasError('required')">Month required</div>
</div>

и вот что я вижу

formControlName = "month"

Добавление formControlName приводит к исчезновению значения по умолчанию в раскрывающемся списке моей формы в Angular

и теперь, когда я удаляю

formControlName = "month"

я вижу это

Добавление formControlName приводит к исчезновению значения по умолчанию в раскрывающемся списке моей формы в Angular

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
0
1 302
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Пожалуйста, добавьте атрибуты value к элементам option.

<form [formGroup] = "registerForm">
  <div>
  <input formControlName = "email">
  </div>
  <div>
  <select class = "form-control" formControlName = "month">
      <option value = "" hidden selected>Select a month</option>
      <option value = "1">Jan</option>
      <option value = "2">Feb</option>
  </select>
  </div>
  </form>

Рабочий код здесь: https://angular-reactive-form-dropdown.stackblitz.io

В вашем FormGroup нужно указать значение так же, как и в HTML:

<select class = "form-control" formControlName = "template">
  <option value = "">-- Choose template --</option>
  <option *ngFor = "let template of templates" [value] = "template">{{ template }}</option>
</select>
this._form = new FormGroup({
  'template': new FormControl('', Validators.required)
});

Другие вопросы по теме