если значение не определено в шаблоне угловой 2/5

Question

У меня есть выпадающий список, и я хочу выбрать первый вариант, если переменная user.gender не определена.

<select class="form-control" formControlName="gender" [(ngModel)]="user.gender">
  <option [attr.selected]="user.gender == undefined ? true : null ">Select</option>
  <option value="1" >Male</option>
  <option value="0" >Female</option>
</select>

Один не очень чистый подход, который работает, это установка первых опций value="undefined". Есть ли лучший способ?

Answer 1

Вы должны установить значение по умолчанию в контроллере, или вы можете сделать это в виде, как с <option selected>Male</option>.

Answer 2

1. In .ts объявляют start = null.
2. В ngOnInit напишите ngOnInit() {user.gender=start}.
3. В .html файле

<select class="form-control" formControlName="gender" [(ngModel)]="user.gender">
  <option disabled [value]="start" selected="true">Select</option>
  <option [value]="1" value="1" >Male</option>
  <option [value]="0" >Female</option>
</select>

Answer 3

Первое - вам следует решить, что вы используете шаблонно-управляемую форму или реактивную форму (нет смысла использовать двустороннюю привязку NgModel, если вы уже управляете своим вводом с помощью formControlName="gender", потому что вы можете обновить значение с помощью этого элемента управления)

В шаблонном режиме вы можете сделать это:

<select class="form-control" [(ngModel)]="user.gender">
  <option value=undefined>Select</option>
  <option value="1" >Male</option>
  <option value="0" >Female</option>
</select>

Компонент:

user = { gender: undefined }