В Angular 8, управляемой шаблоном форме, у меня по умолчанию выбрана опция:
template:
<div class="form-group row">
<label for="menuLevel" class="col-sm-2 .padding-r col-form-label">Menu Level</label>
<div class="col-sm-10 padding-l">
<select id="menuLevel" name="menuLevel" #m (change)="callTypeMenuLevel(m.value)"
[(ngModel)]="defaultMenuLevel" class="form-control"
#newMenuLevel="ngModel"
[ngClass]="{'is-invalid':newMenuLevel.invalid && (newMenuLevel.dirty || newMenuLevel.touched || newForm.submitted),
'is-valid': newMenuLevel.valid && (newMenuLevel.dirty || newMenuLevel.touched || newForm.submitted)}">
<option [value]=null>Select</option>
<option *ngFor="let level of menuLevel" [value]="level.id">{{level.name}}</option>
</select>
</div>
</div>
Component:
public menuLevel = [{ id: 1, name: 'Top Level Menu' },
{ id: 2, name: 'Menu Item' }];
public defaultMenuLevel = null;
Элемент управления как таковой работает нормально. Я хотел бы добавить к нему проверку, чтобы пользователь выбирал уровень меню, а значение по умолчанию «Выбрать» не оставалось выбранным при нажатии кнопки «Сохранить». Так что же будет в этом случае оговоркой «is-invalid»? Потому что просто добавление required = "required" не имеет особого смысла.