Angular / FormBuilder 为 mat-select 下拉菜单设置默认值

问题描述

我正在尝试为我的项目中的下拉列表设置默认值。我尝试了几种不同的方法来做到这一点，但我尝试过的任何方法似乎都不起作用。我尝试使用 mat-select 中的 [(value)] 和 formBuidler 上的 .setValue(...) 函数设置默认值。我已经在 stackblitz 中复制了我的代码结构。有谁知道我缺少什么或为什么我目前拥有的不起作用？任何帮助表示赞赏

解决方法

我可以在您的代码中看到 2 个问题：

1. 你需要定义 formBuilder 而不是只用 type 定义它

export class AppComponent implements OnInit {
    myForm: FormGroup;
    formBuilder: FormBuilder;   // this isn't the right definition of the class;
} 

这应该改为

 export class AppComponent implements OnInit {
     myForm: FormGroup;
     formBuilder: FormBuilder = new FormBuilder();  
     // or define it by constructor
     // since you are working with typescript you can define in this way
    constructor(private formBuilder: FormBuilder) { }
     // typescript will transform this to  
     // constructor() { 
     //     this.formBuilder = new FormBuilder()
     // }
}

2. 第二个问题是[formGroup]="myForm"您应该在模板中添加 formGroup

检查复制示例： https://stackblitz.com/edit/angular-material2-issue-default-select-dppuqx?file=app/app.component.html

,

使用 FormBuilder 时，您可以将控件的初始值作为第一个参数传递：

this.formBuilder.control(initialValue,...)