Ionic Angular：如何在FormBuilder.group()中传入API获取的变量？

我尝试把通过API获取的变量传入FormBuilder组，让它包含在发送给服务器的POST请求里，但目前apiKey字段始终显示为null。直接给变量赋值固定字符串时能正常工作，通过API获取值却无法生效。

我的实现代码 #

formAPICode: any;

ngOnInit() {
  this.ionicForm = this.formBuilder.group({
    apiKey: [this.formAPICode], // 此处应显示API密钥但为null，控制台输出NULL
    name: ['', [Validators.required, Validators.minLength(2)]],
    email: [
      '',
      [
        Validators.required,
        Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$'),
      ],
    ],
    mobile: ['', [Validators.required, Validators.pattern('^[0-9]+$')]],
    street: ['', [Validators.required, Validators.minLength(2)]],
    unit: [],
    city: ['', [Validators.required, Validators.minLength(2)]],
    state: ['', [Validators.required, Validators.minLength(2)]],
    zip: ['', [Validators.required, Validators.minLength(5)]],
    summary: ['', [Validators.required, Validators.minLength(2)]],
    dateTime: [],
    existingCustomer: [],
    customerConsent: [Validators.required],
  });

  // 加载WP企业数据
  this.wpService.postCompInfoDetails().subscribe((data) => {
    this.companyDetail = data;
    this.formAPICode = this.companyDetail.acf.forms_api_key;
    console.log(this.formAPICode); // 返回45678451-1124d-45ae-bf15-ABC
  });
}

控制台输出的表单数据 #

form data {"apiKey":null,"name":"John Doe","email":"john@doe.com","mobile":"1324567894","street":"1234 Main St","unit":"Suite 202","city":"New York","state":"NY","zip":"10001","summary":"Description of summary","dateTime":null,"existingCustomer":null}

可正常工作的直接赋值方式 #

formAPICode = '45678451-1124d-45ae-bf15-ABC';

解决方法 #

问题根源是表单初始化时API异步请求还没完成，此时formAPICode为null，而且FormControl不会自动监听变量的后续变化。只需在API请求成功后，手动更新表单的apiKey字段即可：

this.wpService.postCompInfoDetails().subscribe((data) => {
  this.companyDetail = data;
  this.formAPICode = this.companyDetail.acf.forms_api_key;
  // 手动同步表单控件值
  this.ionicForm.patchValue({
    apiKey: this.formAPICode
  });
});

也可以选择把表单初始化逻辑放在API请求的回调中，但这种方式会延迟表单创建，可能影响页面渲染，因此更推荐用patchValue的方式更新表单字段。

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