Угловая проверка формы 6 или 2+ для опции выбора не проверяется

Question

угловой вариант 6.х

HTML-файл:

<select tabindex="4" class="selectoptn required" formControlName="invoice_type" 
          required [ngClass]="{ 'is-invalid': submitted && f.invoice_type.errors }">
            <option value="" [selected]="true" [ngValue]="undefined">Select an Invoice Type</option>
            <option value="pdf">PDF</option>
            <option value="brc">BRC</option>
          </select>
          <div *ngIf="submitted && f.invoice_type.errors" class="invalid-feedback">
            <div *ngIf="f.invoice_type.errors.required">Invoice type is required</div>
          </div>

Связанный код в контроллере:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class ProjectsAddComponent implements OnInit {

constructor(private formBuilder: FormBuilder) {}

this.projectForm = this.formBuilder.group({
  'invoice_type': ['', Validators.required]
});
}

вопросы: - При отправке сообщение об ошибке не отображается.

Примечание: - При отправке все остальные входные данные проверены правильно - инспектор показывает, что элемент формы недействителен - http://prntscr.com/m97p2s

Дайте мне знать, если кто-то может найти выход.

Answer 1

Ваш код выглядит идеально. Я тоже сталкивался с этой проблемой. В то время это был классный вопрос. Просто попробуйте удалить класс, как показано ниже.

<div *ngIf="submitted && f.invoice_type.errors">    // Remove class from hear 
     <div *ngIf="f.invoice_type.errors.required">Invoice type is required</div>
</div>

В то время я не добавлял CSS для этого класса. И после удаления этого класса это сработало для меня. Поэтому я думаю, что это может быть та же проблема.

И убедитесь, что вы должны поместить <select> в <form> тег.

Надеюсь, это поможет вам :)