获取FormControl对象值时返回空白的问题（Angular 15）

可能原因及解决方法： #

• 异步赋值时机问题
  如果nid_customer的值是通过接口请求等异步操作设置的，直接在组件初始化阶段（比如ngOnInit）调用get('nid_customer').value会因为数据未返回而拿到空值。可以通过valueChanges监听值的变化：

  this.createForm.get('nid_customer')?.valueChanges.subscribe(val => {
    console.log('nid_customer 当前值:', val);
  });
  

  或者确保在异步回调完成后再去获取值。

• 表单赋值方式错误
  不要直接修改FormControl的value属性，必须用Angular提供的setValue或patchValue方法赋值：

  // 单个控件赋值
  this.createForm.get('nid_customer')?.setValue('991');
  // 批量赋值
  this.createForm.patchValue({ nid_customer: '991' });
  

• 模板绑定冲突
  检查模板中是否同时使用了响应式表单的formControlName和[(ngModel)]，这两种绑定方式混用会导致值同步异常，建议只保留formControlName="nid_customer"。

• 控件初始化验证
  确认nid_customer控件在表单初始化时是否正确声明，比如：

  this.createForm = this.fb.group({
    nid_customer: ['', Validators.required] // 初始值可以设为空或默认值
  });
  

  若初始值未正确设置，也会导致获取到空值。

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