Angular 如何要求下拉选项中不再有值的下拉列表？

我使用的是Angular 6，有一个必需的

元素，当前选项为

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>

A.
B
C

但是，假设

d

以前是一个有效的选项，并且是保存到后端数据库中的选项。因此，当我加载页面时，我将

mySelect

设置为数据库中存储的内容，如果我使用Chrome devtools检查

mySelect

，它有一个

ng relfect model=“d”

，但select元素为空，因为

d

不再是选项

当我检查我的

NgForm

的

.valid

属性时，我希望它返回

false

。但是，它返回

true

---

如果我的select元素的值不是有效选项，如何使其无效？

一个简单的解决方案是将

pattern=“['a'|'b'|'c']”添加到您的select：

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

HTML文件：

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

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

在HTML文件中：

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

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


{{option.description}}

也更新了
是
a
、
b
和
c
静态值吗？@lealceldero不，通常我会有来自
*ngFor
的选项值：
{option.description}
您应该将其添加到问题中，因为它是相关的。从数据库加载信息时，我会检查旧的（保存在数据库中）值现在是有效值，如果不是，请在默认情况下选择一个新值（或您决定执行的任何操作），而不是应用附加检查等等（这在第一次使用时非常有用，因为在这之后，值将始终有效）@lealcelderio“默认选择一个新值”是什么意思？为了简单起见，我上面的示例使用了静态选项，但通常我会使用来自
*ngFor
：
{{option.description}}
的选项值。请查看我的更新答案。使用
pattern=new RegExp（vm.options.map（option=>option.value）。join（“|”）；
@RyanBuening我宁愿在从数据库加载信息时检查旧（保存在数据库中）值现在是否有效，如果无效，则默认选择新值（或您决定执行的任何操作），而不是应用其他检查等等（这在第一次使用时非常有用，因为在这之后值将始终有效）@Andriy我的选项是一个对象数组
myObject[]
：
[{“description”：“a1”，“value”：“a”}，{“description”：“b1”，“value”：“b”}]
我的模式验证器不断返回false，并显示以下内容：
pattern=“new RegExp”（vm？.myObject.map（object=>object.value.join（“|”）”
@lealcelderio谢谢你的评论，我也会探讨一下。