Question

我正在使用Angular 6，并具有一个必需的<select>元素和当前选项a, b, c：

<select class="form-control" name="mySelect" [(ngModel)]="vm.mySelect" #mySelect="ngModel" required>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

但是，假设d以前是一个有效选项，并且保存在我的后端数据库中。因此，当我加载页面时，我会将mySelect设置为数据库中存储的内容，如果我使用Chrome devtools检查mySelect，则页面上有一个ng-relfect-model="d"，但是select元素为空因为d不再是选项。

当我检查NgForm的{{1}}属性时，我希望它返回.valid。但是，它返回false。

如何使它的选择元素无效（如果它的值不是有效的选项）？

Answer 1

一个简单的解决方案是将pattern="['a' | 'b' | 'c']"添加到您选择的内容中：

<select class="form-control" 
        name="mySelect" 
        [(ngModel)]="vm.mySelect" 
        #mySelect="ngModel" 
        pattern="['a' | 'b' | 'c']"
        required>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

或者，如果您有一系列选项，则可以在ts文件中构造一个模式并将其传递给HTML。

ts文件：

pattern = new RegExp(['a','b', 'c'].join('|'));

HTML文件：

<select [patern]="patern"...>...

STACKBLITZ（在输入框中输入无效值）

新更新

如果将vm.options作为具有value属性的对象数组，请尝试以下操作：

在您的ts文件中：

vm = {
  options: [
    { 
      description: 'a1', 
      value: 'a' 
    }, 
    { 
      description: 'b1', 
      value: 'b' 
    }, 
    { 
      description: 'c1', 
      value: 'c' 
    }
  ],
  mySelect: null
};
pattern = new RegExp('^[' + this.vm.options.map(o => o.value).join('') + ']$');

在您的HTML文件中：

<select class="form-control" 
        name="mySelect" 
        [(ngModel)]="vm.mySelect" 
        #mySelect="ngModel" 
        required 
        [pattern]="pattern">
  <option *ngFor="let option of vm.options" 
          [value]="option.value">{{option.description}}</option>
</select>

STACKBLITZ也已更新

如何在下拉菜单选项中要求不再具有值的下拉菜单？

1 个答案: