Angular2 select with ngModel пуст (управляется шаблоном)

Question

У меня есть выбор с параметрами, заполненными массивом. К сожалению, ничего не выбрано, даже если первый параметр имеет атрибут selected.

@Component({ 
    selector: 'app-root', 
    template: ` 
    <select name="fruits" [ngModel] required> 
     <option *ngFor="let fruit of selectData;" [ngValue]="fruit">{{fruit}}</option> 
    </select> 
    ` 
}) 
export class AppComponent { 
    selectData = ['Apple', 'Banana', 'Cherry', 'Kiwi']; 
} 

Еще хуже: если я добавить выбранный атрибут к первому элементу с помощью [attr.selected]="i == 0" избранных действует (требуется), но все еще не показывает выбранное значение. Может быть, это может быть ошибка?

Answer 1

Пример с кодом

Это очень легко с помощью шаблонов форм. Но дает вам меньше контроля над проверкой.

<select name="fruits" [ngModel] required> 
<option value="" disabled selected>Select your option</option> 
     <option *ngFor="let fruit of selectData;" [ngValue]="fruit">{{fruit}}</option> 
    </select> 

Шаблон Driven Пример

<select class="form-control" id="state" required [(ngModel)]="address.state" name="state" #state="ngModel"> 
<option value="" disabled selected>Select your option</option> 
<option *ngFor="let state of states" [value]="state">{{state}}</option> 
</select> 

Model Driven Пример

Это модель приводится пример. У вас больше контроля над формами с помощью форм, управляемых моделью, но эта конкретная задача, которую вы пытаетесь выполнить, проста. с помощью шаблона я считаю, что все, что вам нужно сделать, это добавить местозаполнитель.

Вот как я ручка добавления состояния в выпадающий список,

В component.html файле

<select (blur)="stateValidate('State *Required', 'State Name')"   
    class="form-control" id="state_address" formControlName="state_address"> 
    <option *ngFor="let state of states">{{state}}</option> 
</select> 

В файле component.ts,

states = ['Select State', 'Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Federated States of Micronesia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; 

Пояснение

Обратите внимание, что первое значение - Select State. В моем случае это не проверяется, если пользователь не изменит его на фактическое состояние.

Это означает, что если пользователь переводит его в состояние, а затем обратно в «Выбрать состояние», он проверяет и разрешает отправку формы.

Обращаем Ваше внимание, что на картинке поле Состояние red недействительно, и форма Updatebutton неактивна, поскольку все поля в форме являются недопустимыми.

Пятно Функция I Добавить

Я беру проверку на шаг дальше и добавить функцию размытия. Таким образом, когда пользователь покидает поле ввода, я могу сразу же проверить, вошли ли они в что-то приемлемое или нет. Просто, чтобы дать вам представление о том, что здесь выглядит, это функция размытия, которая вызывается, когда вы оставляете combobox для выбора состояния.

stateValidate(ErrorTitle, ErrorMessage) { 
     if (this.profileForm.get('state_address').status == VALID) { 
      this.toastSuccess("State Entered", "State entered correctly"); 
     } else { 
      this.toastWarning(ErrorTitle, ErrorMessage); 
     } 
    } 

Если это поле ввода недопустимо, появится тост, направляющий пользователя на правильное заполнение. Вы можете использовать эту же методологию для проверки значения поля ввода и убедиться, что это не Select State в моем случае.

Answer 2

обходным для этого может быть (а некрасиво, хотя)

<select name="fruits" [(ngModel)]="fruit" required> 
    <option *ngFor="let fruit of selectData;" [ngValue]="fruit">{{fruit}}</option> 
</select> 

и в компоненте вы могли бы дать ему значение по умолчанию:

this.fruit = this.selectData[0];