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>

点击按钮时，它会要求我填写下拉列表，但问题是未选择默认值，即选择行业，而不是显示默认值，它没有显示任何内容，但验证工作正常。< / p>

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

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

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

这是一个....

的 Demo

Answer 2

它适用于默认选择 {{city.sName}}

Answer 3

在您的ts文件中，将默认设置为空

Angular 2：下拉默认值，验证不起作用

3 个答案:

的 Demo