Angular material 角材料'；s mat自动完成输入未按预期禁用

我正在尝试禁用“角度材质自动完成”组件。我本来希望能够在输入上设置

禁用

，但那没有任何作用。（我还尝试在mat表单字段和mat自动完成上设置

disabled

）。在输入上设置

matAutocompleteDisabled

会阻止显示选项，但仍然允许在字段中键入。在输入时设置

readonly

，可以防止输入，但不会改变用户界面，因此用户可能会感到困惑。这是一个错误，还是我遗漏了什么

这是我迄今为止最接近的一次，使用了

readonly

（并且disabled没有按预期工作）

{{option}}

您应该使用formControl进行设置，例如：

this.formGroupName.controls['myControl'].disable()

---

您应该使用formControl进行设置，例如：

this.formGroupName.controls['myControl'].disable()

---

你可以使用css技巧来达到这个目的

将某些类应用于输入的父标记。在您的例子中，上面的标记是

，所以我在这个类中添加了禁用块。并应用于css下面

.disable-block {
    pointer-events: none;
    opacity: .7;
}

完整的代码在这里

HTML

如果您想要更轻的文本字段，则可以将不透明度降低到.6或.5或更高

---

希望这能解决您的问题。

您可以为此使用css技巧

将某些类应用于输入的父标记。在您的例子中，上面的标记是

，所以我在这个类中添加了禁用块。并应用于css下面

.disable-block {
    pointer-events: none;
    opacity: .7;
}

完整的代码在这里

HTML

如果您想要更轻的文本字段，则可以将不透明度降低到.6或.5或更高

---

希望这能解决您的问题。

我正在使用模板驱动的表单。应该有一种方法可以在html中而不是在代码中禁用，对吗？@SherriM如果你使用的是模板驱动的表单，那么这个答案怎么能解决你的问题呢？我最终更新了我的表单，使之成为反应式表单，这很有效。我使用的是模板驱动的表单。应该有一种方法可以在html中而不是在代码中禁用，对吗？@SherriM如果您使用的是模板驱动的froms，那么这个答案如何解决您的问题呢？我最终更新了我的表单，使之成为反应式的，这是有效的。

.disable-block {
  pointer-events: none;
  opacity: .7;
}