Angular 2: выпадающее значение по умолчанию с проверкой не работает

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

Фрагмент 1.html

            <div class="input-group" >
              <select  required name="industryType" id="industryType" [(ngModel)]="institution.industryType" aria-describedby="sizing-addon1" class="select-custom">
                <option selected [value]="null">Select Industry</option>
                <option value="IT">IT</option>
                <option value="Business">Business</option>
                <option value="Engineering">Engineering</option>
                <option value="Teaching">Teaching</option>
                <option value="Marketing">Marketing</option>
              </select>
              </div>

     <button type="submit"   class="btn btn-primary login-button border-custom">Add Industry</button>

При нажатии кнопки он просит меня заполнить раскрывающийся список, но проблема заключается в том, что значение по умолчанию не выбрано, т.е. выберите отрасль, вместо того, чтобы показывать значение по умолчанию, оно ничего не показывает, но проверка работает нормально.

Фрагмент 2.html

        <div class="input-group" >
          <select   required name="industryType" id="industryType" [(ngModel)]="institution.industryType" aria-describedby="sizing-addon1" class="select-custom">
            <option selected [value]="default">Select Industry</option>
            <option value="IT">IT</option>
            <option value="Business">Business</option>
            <option value="Engineering">Engineering</option>
            <option value="Teaching">Teaching</option>
            <option value="Marketing">Marketing</option>
          </select>
             </div>
 <button type="submit"   class="btn btn-primary login-button border-custom">Add Industry</button>

При нажатии кнопки мне не предлагается заполнить раскрывающийся список, но выбрано значение по умолчанию, т.е. выберите отрасль, проверка не работает с этим фрагментом кода. Может ли кто-нибудь предложить мне, что я делаю неправильно или что? это правильный способ сделать это?


angular dropdown
person Kumail Hussain    schedule 14.03.2017    source источник
comment
Вы должны начать с добавления required к вашему выбору, если пользователь должен указать значение для этого поля <select ... required>...</select>. Что касается значения по умолчанию, вы пробовали что-то вроде: <option value="" selected>Select Industry</option>   -  person mickdev    schedule 14.03.2017
comment
извините, я пропустил это при вставке кода, но требуемый работает с первым фрагментом, а не со вторым, и да, я тоже пробовал это значение = в раскрывающемся списке не отображается значение по умолчанию   -  person Kumail Hussain    schedule 14.03.2017

Ответы (2)


arrow_upward
2
arrow_downward

Удаление двухсторонней привязки из формы, похоже, решает проблему, поэтому измените это:

[(ngModel)]="institution.industryType"

только к этому:

ngModel

А затем просто предварительно выбранный вариант с использованием value="", поэтому ваш полный шаблон будет выглядеть так:

<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)">
  <select required name="industryType" id="industryType" ngModel>
    <option value="" selected disabled>Select Industry</option>
    <option value="IT">IT</option>
    <option value="Business">Business</option>
    <option value="Engineering">Engineering</option>
    <option value="Teaching">Teaching</option>
    <option value="Marketing">Marketing</option>
  </select>
  <button type="submit">Add Industry</button>
</form>

В форме вам действительно не нужно иметь двустороннюю привязку, вы можете получить доступ к этому значению формы из объекта, созданного из формы, когда вы передаете это значение формы в свою отправку:

submit(formValue) {
  console.log(formValue.industryType) // here is your industry type
}

Затем вы, конечно, можете присвоить это значение своему объекту institution, если хотите/нужно.

Вот....

Демо

person AJT82    schedule 15.03.2017
comment
Ваша демонстрация не работает. Метод submit вызывается, даже если в раскрывающемся списке не выбрано ни одно значение. - person Azimuth; 31.01.2018

arrow_upward
0
arrow_downward

{{ город.sName }}

это будет работать для выбора по умолчанию {{ city.sName }}

person chandan kumar    schedule 28.05.2017