表单已填有效值但FormControl始终无效的问题求助

问题描述 #

我创建了一个表单，部分字段值来自变量，表单构建代码如下：

this.commentForm = this.formBuilder.group({
      title: [null, Validators.required],
      description: [null, Validators.required],
      textId: [this.data.textId, Validators.required],
      userId: [this.userService.getUserLoggedId, Validators.required],
      likes: [this.rating, Validators.required],
      isActive: [true],
})

提交至API前会进行校验：

if(this.commentForm.invalid) {
      this.notification.error("Required Fields!")
      return
}

执行console.log(this.commentForm.value)可看到表单已有有效值：

{
    "title": "test",
    "description": "fsfsdfswe",
    "textId": "86f454d6",
    "userId": "8369ce3c",
    "likes": 4,
    "isActive": true
}

但表单状态始终为INVALID，无法提交到后端。

问题原因 #

核心问题出在userId字段的初始值设置：你将this.userService.getUserLoggedId这个方法的引用直接赋值给了字段，而非调用该方法获取返回值。

尽管console.log(this.commentForm.value)显示userId有有效值，这大概率是Angular表单在后续变更检测中自动执行了该方法引用并获取到值，但表单初始化时，该字段的初始值是一个函数引用，并不符合Validators.required的校验规则（required校验要求值不能为null/undefined/空字符串等，函数引用本身不被视为有效输入值），因此表单始终处于INVALID状态。

解决方案 #

修改userId字段的初始值，调用方法获取返回值：

userId: [this.userService.getUserLoggedId(), Validators.required],

额外排查点 #

• 确认this.data.textId和this.rating在表单初始化时已经是有效值（非undefined、null）
• 如果这些变量是异步获取的，需要在变量赋值完成后，手动更新对应表单控件的值，示例：

  this.commentForm.get('textId')?.setValue(this.data.textId);
  this.commentForm.get('likes')?.setValue(this.rating);
  

内容的提问来源于stack exchange，提问作者Micaely Gusmão