Angular Material 2 表单元素

Question

我正在开发一个 Angular Web 应用程序，使用：

• Angular 4.1.2
• Angular 材质 2.0.0-beta.11

我正在尝试创建一个简单的模式对话框，该对话框在打开时会提供一些输入字段供用户完成和提交。我的对话框将包含：

• 简单的文本输入。
• 下拉列表
• 日历选择器

首先，我只添加了一个文本输入字段和一个选择下拉列表。我不明白是否需要创建<form> 并将每个元素包装在<md-form-field> 中。当我尝试这个时，我得到一个错误：

md-form-field must contain a MdFormFieldControl. Did you forget to add mdInput to the native input or textarea element?

如果我不将 <md-select> 元素包装在 <md-form-field> 中，我不会出错，但样式与上面的 <input> 元素不同。

我不知道如何在同一个模态对话框中包含所有 3 个样式相同的 UI 组件。非常欢迎任何建议。

Answer 1

输入和选择之间的样式不匹配一直是 Angular Material 中的一个持续问题。最近刚刚通过共享尽可能多的 css 解决了这个问题，这引发了从 md-input-container 到 md-form-field 的变化。您现在可以将选择和输入放在 md-form-field 中，它们一起看起来很棒。

但是，这些更改在 beta.11 中不可用。您可以通过安装material2-builds 来使用它们，否则必须等待 beta.12 发布。

同时，您可以覆盖 CSS（this thread 中的结帐解决方法）。