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

HTML состоит,

<select class="form-control selectBox" name="username" #username="ngModel" required ngModel>
<option disabled selected>Select User Name</option>
<option *ngFor="let user of userList" [value]="user.uid">{{user.name }}</option>
</select>

< Сильный > Ts :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  userList: any = [
    {
      "name" : "Test User"
    },
    {
      "name" : "Hello World"
    },
    {
      "name" : "User Three"
    }
  ]
}

По умолчанию в поле выбора отображается пустое значение.

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

<option disabled selected>Select User Name</option>

Stackblitz: https://stackblitz.com/edit/angular-wfjmlm

3
Maniraj Murugan 21 Авг 2018 в 16:08

5 ответов

Лучший ответ

Вам необходимо установить значение в поле выбора следующим образом:

<option disabled selected value="">Select User Name</option>

Будет ли это работать.

4
alsami 21 Авг 2018 в 13:16

Используйте угловой материал вместо select и option. Вот так например:

   <mat-form-field>
      <mat-select placeholder="Select User Name">
        <mat-option *ngFor="let user of userList" [value]="user.uid">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

Подробнее здесь: https://material.angular.io/components/select/overview

-2
PierBJX 21 Авг 2018 в 13:15

Решение может быть найдено следующим образом HTML

<select class="form-control selectBox" name="username" [(ngModel)]="selected" required>
 <option disabled selected>Select User Name</option>
 <option *ngFor="let user of userList" >{{user.name }}</option>
</select>
<hr>   {{selected}}

Следующим был контроллер

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  userList: any = [
    {
      "name": "Test User"
    },
    {
      "name": "Hello World"
    },
    {
      "name": "User Three"
    }
  ];
  selected = 'Select User Name';
}

stackblitz

1
Sai Krishna Kanth Singh 21 Авг 2018 в 14:01

Реактивные формы

Я очень рекомендую использовать ReactiveForms. Таким образом, вы получите более чистый код, а также более мощные опции.

Сначала импортируйте ReactiveForms в ваш app.module:

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
...
   imports: [
      ...
      ReactiveFormsModule
      ...
   ]

Затем в вашем контроллере:

myForm: FormGroup;
constructor(private fb: FormBuilder){
    this.myForm = this.fb.group({
          username: null
      })
}

И в вашем шаблоне:

<form [formGroup]="myForm">
   <select formControlName="username" placeholder="Select Username">
        <option disabled selected>Select User Name</option>
        <option *ngFor="let user of userList" [value]="user.uid">{{user.name }}</option>
  </select>
1
Hamid Asghari 21 Авг 2018 в 14:52

Добавить [value]=""

<option disabled [value]="" selected>Select User Name</option>

И если вы хотите скрыть опцию отключения, добавьте атрибут hidden

<option hidden disabled [value]="" selected>Select User Name</option>
1
Krishna Rathore 21 Авг 2018 в 13:20
51949426