Angular 未在ng bootstrap 模式中设置表单输入

我正在try 创建一个具有Formgroup的模型，我从另一个组件调用该模型，并使用以下代码传递参数

modalRef.componentInstance.question=item.question
etc....

到目前为止，一切都很好，我可以从模型中读取该变量 但我的问题是Form控件总是空的 以下是我的模式代码

import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modalinput2',
  templateUrl: './modalinput2.component.html',
  styleUrls: ['./modalinput2.component.css']
})
export class Modalinput2Component implements OnInit {
  @Input() question: string = "";
  @Input() answer: string = "";
  @Input() department: string = "";
  @Input() category: string = "";
  @Input() id: string = "";

  myForm: FormGroup;

  constructor(public modal: NgbActiveModal, private formBuilder: FormBuilder) {
    console.log("printing from mdoal "+this.question)
    this.myForm = this.formBuilder.group({
      question: ['', [Validators.required, Validators.minLength(3),Validators.pattern(/^(\s+\S+\s*)*(?!\s).*$/)]],
      answer: ['', [Validators.required, Validators.minLength(3), Validators.pattern(/[\S]/g)]],
      department: [''],
      category: [''],
    });
  }
  ngOnInit(): void {

  }

  getErrorMessage(control: AbstractControl | null): string {
    if (control?.errors) {
      const errorKey = Object.keys(control.errors)[0];
      const errorMessages: Record<string, string> = {
        required: 'This field is required.',
        minlength: 'Minimum length is ' + control.errors?.['minlength']?.requiredLength + ' characters.',
        maxlength: 'the max length is '+control.errors?.['maxlength']?.requiredLength + ' characters.'
       
      };

      return errorMessages[errorKey] || 'Invalid input.';
    }
    return '';
  }

  write() {
    if (this.myForm.valid) {
      const formData = {
        "question": this.myForm.value.question,
        "answer": this.myForm.value.answer,
        "department": this.myForm.value.department,
        "category": this.myForm.value.category,
        "id": this.id
      };

      
      this.modal.close(formData);
    } else {
      console.log("Form is invalid. Please check the input values.");
    }
  }
  
}

这里是它的html

<div class="modal-header modal-lg">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
  </div>
  
  
  
  <div class="modal-body">
    <form [formGroup]="myForm">
      <div class="mb-3">
        
        <label for="questions">Question</label>
        <div class="input-group3">
          <input formControlName="question" id="questions" class="form-control" name="questions" />
        </div>
        
        <div *ngIf="myForm.get('question')?.invalid && myForm.get('question')?.touched" class="text-danger">
          {{ getErrorMessage(myForm.get('question')) }}
        </div>
  
      
        <label for="answer">Answer</label>
        <div class="input-group2">
          <input formControlName="answer" id="answer" class="form-control" name="answer" />
        </div>
        
        <div *ngIf="myForm.get('answer')?.invalid && myForm.get('answer')?.touched" class="text-danger">
          {{ getErrorMessage(myForm.get('answer')) }}
        </div>
  
        
        <label for="department">Department</label>
        <div class="input-group">
          <input formControlName="department" id="department" class="form-control" name="department" />
        </div>
  
        
        <label for="category">Category</label>
        <div class="input-group">
          <input formControlName="category" id="category" class="form-control" name="category" />
        </div>
      </div>
  
    </form>
  </div>
  
  
  
  
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="write()">Save</button>
  </div>

我记得这很管用，但我搞砸了一些东西，现在不管用了