Поле выбора не показывает выбранный вариант первым

Я использую angular 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>

Ц:

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


typescript javascript angular angular-forms
person Maniraj Murugan    schedule 21.08.2018    source источник
comment
Вам нужно ngModel? Без него работает. См. этот stackblitz.   -  person ConnorsFan    schedule 21.08.2018
comment
@ConnorsFan, мне нужна ngModel ..value=" ", которая у меня работала....   -  person Maniraj Murugan    schedule 21.08.2018

Ответы (5)


arrow_upward
5
arrow_downward

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

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

Заставит это работать.

person Sanoj_V    schedule 21.08.2018

arrow_upward
2
arrow_downward

решение можно найти следующим образом: 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

person Krishna Kanth    schedule 21.08.2018

arrow_upward
1
arrow_downward

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

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

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

<option hidden disabled [value]="" selected>Select User Name</option>
person Krishna Rathore    schedule 21.08.2018

arrow_upward
1
arrow_downward

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

Я в значительной степени предлагаю использовать 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>

person Hamid Asghari    schedule 21.08.2018

arrow_upward
-2
arrow_downward

Используйте угловой материал вместо выбора и опции. Например, вот так:

   <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

person PierBJX    schedule 21.08.2018
comment
Они могут исправить то, что у них есть. Нет необходимости вводить еще больше библиотек. - person Reinstate Monica Cellio; 21.08.2018
comment
Это решение, как и другое, не нужно понижать голос ^^ В зависимости от того, что вы хотите, а также от стиля. - person PierBJX; 21.08.2018
comment
Я считаю плохим ответом совет кому-то использовать библиотеку для решения простой проблемы. Это похоже на покупку новой машины, потому что ваши фары в вашей нынешней машине нуждаются в замене — это излишество. - person Reinstate Monica Cellio; 21.08.2018
comment
Как я уже сказал, он также обеспечивает реализованный стиль. Это было также потому, что он использовал angular, поэтому, на мой взгляд, было бы неплохо реализовать угловой материал или PrimeNG, например, но что угодно, ахах - person PierBJX; 21.08.2018
comment
Не принимайте это на свой счет. Я считаю это плохим советом, поэтому я должен понизить его. Продолжайте отвечать на вопросы и не принимайте близко к сердцу - нас всех иногда минусуют :) - person Reinstate Monica Cellio; 21.08.2018