Пример с кодом
Это очень легко с помощью шаблонов форм. Но дает вам меньше контроля над проверкой.
<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
недействительно, и форма Update
button
неактивна, поскольку все поля в форме являются недопустимыми.
Пятно Функция 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
в моем случае.
Эй, я обновил свой код. Проверьте первый пример, используя свой код. Если вы используете шаблонные управляемые формы, вы должны просто добавить опцию и отключить ее. Вы можете видеть, что второй пример использует мой код, когда я использовал шаблонные управляемые формы для выбора состояния в поле со списком. Затем третий пример - для форм, управляемых моделью. Но было бы намного больше работы, чтобы заставить модель работать. – wuno
Даже я не хочу, чтобы значение «Выберите свой вариант» по умолчанию. Я попробовал ваш пример, но выбор остается пустым. – Mick