如何在Angular响应式表单的ng-select中设置默认值

你当前定义表单组时，gender控件的初始值设置为空字符串''，和需要默认选中的Male值不匹配，按以下方案修改即可：

方案1：表单初始化时直接赋值 #

直接修改表单定义中gender字段的初始值为'Male'：

demographyForm = this.fb.group({
    gender: ['Male', [Validators.required]]
})

方案2：动态赋值（适用于初始值来自接口、用户操作等异步场景） #

在需要赋值的时机调用setValue或patchValue方法即可：

ngOnInit() {
  // 单个控件赋值写法
  this.gender?.setValue('Male');
  
  // 批量表单赋值写法
  // this.demographyForm.patchValue({ gender: 'Male' });
}

补充说明 #

• 由于你的ng-option绑定的[value]是字符串类型，只要给表单控件赋值和genders数组中完全相等的字符串，就会自动匹配选中对应选项
• 若后续改用对象类型作为选项值，需要保证赋值对象和选项数组中对应对象的引用一致，也可以配置[compareWith]属性自定义匹配规则

内容的提问来源于stack exchange，提问作者WhiteAB