Angular 2 : Drop down default value with validation not working

Question

目前我被下拉菜单困住了，问题是所需的验证器和选择的默认值

Snippet1.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>

单击按钮时，它要求我填写下拉列表，但问题是未选择默认值，即选择行业而不是显示默认值，它什么也不显示，但验证工作正常。

Snippet2.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>

单击按钮时，它不会要求我填写下拉列表，但会选择默认值，即选择行业，验证不适用于此代码段，任何人都可以建议我在做什么错误或正确的方法是什么？

Answer 1

从表单中删除双向绑定(bind)似乎可以解决问题，因此请更改此:

[(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>

在表单中，您实际上不需要双向绑定(bind)，当您将该表单值传递给提交时，您可以从从表单创建的对象访问此表单值:

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

然后，如果您愿意/需要，您当然可以将此值分配给您的对象institution。

这是一个......

<强> Demo