角材料选择不显示默认选择

Question

在表单中，我无法获得预选选项以显示在选择项上。 如果您查看不带表单元素的材料选择示例，则该示例有效，但具有表单，该模型正确，并且如果我在表单上单击“提交”，则该示例有效，但我真的希望它在显示默认答案时显示打开表格。

https://stackblitz.com/edit/angular-5367rp?file=app%2Fselect-hint-error-example.html

它应该看起来像位于https://material.angular.io/components/select/examples上的示例（双向绑定选择），其中显然已预先选择了“选项2”。

Answer 1

使用表单时，通常不绑定到'value'属性，因为表单控件有效地替换了它。因此，要“预先选择”一个值，请在表单控件上进行设置：

animals: Animal[] = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
];
// selected = "Dog"; // don't use this
animalControl = new FormControl(this.animals[0], [Validators.required]);