Ng Bootstrap模态框FormControl无法填充传入参数问题

问题场景 #

通过modalRef.componentInstance.question=item.question等方式向Ng Bootstrap模态框组件传递@Input参数，能正常读取这些参数值，但表单控件始终为空，此前功能正常，现在出现异常。

核心原因 #

Angular中@Input属性的赋值时机晚于组件构造函数执行阶段，会在ngOnInit生命周期钩子前完成赋值。你在构造函数中初始化表单时，question、answer等@Input属性还未被赋值，导致表单控件初始值为空，且后续未同步输入值到表单，最终FormControl一直处于空状态。

解决方案 #

方案一：在ngOnInit中同步输入值到表单

修改组件的ngOnInit方法，将@Input的值同步到已初始化的表单控件中：

ngOnInit(): void {
  // 用patchValue批量同步Input值到表单
  this.myForm.patchValue({
    question: this.question,
    answer: this.answer,
    department: this.department,
    category: this.category
  });
}

也可以直接在ngOnInit中初始化表单（适用于需要根据Input值设置初始校验逻辑的场景）：

// 移除构造函数内的表单初始化代码，移至ngOnInit
ngOnInit(): void {
  this.myForm = this.formBuilder.group({
    question: [this.question, [Validators.required, Validators.minLength(3),Validators.pattern(/^(\s+\S+\s*)*(?!\s).*$/)]],
    answer: [this.answer, [Validators.required, Validators.minLength(3), Validators.pattern(/[\S]/g)]],
    department: [this.department],
    category: [this.category],
  });
}

方案二：使用@Input setter实时更新表单

如果需要在Input值动态变化时同步更新表单控件，可以为每个@Input添加setter：

private _question: string = "";
@Input() set question(value: string) {
  this._question = value;
  // 确保表单已初始化后再更新控件值
  if (this.myForm) {
    this.myForm.get('question')?.setValue(value);
  }
}
get question(): string {
  return this._question;
}

// answer、department、category的setter逻辑同理
private _answer: string = "";
@Input() set answer(value: string) {
  this._answer = value;
  if (this.myForm) {
    this.myForm.get('answer')?.setValue(value);
  }
}
get answer(): string {
  return this._answer;
}

注意事项 #

• 构造函数中的console.log("printing from mdoal "+this.question)会打印空值，建议将该打印逻辑移至ngOnInit中执行；
• 使用patchValue或setValue时，需确保表单实例已完成初始化。

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