Angular响应式表单在Observable订阅中设置FormGroup数组报错排查

Hey there! Those error messages are pointing to mismatches between how you're trying to set values on your reactive form and the structure you defined when creating it. Let's break down the issues and fix them one by one.

Key Problems Identified #

• You're returning FormGroup instances instead of raw values when trying to populate the form. The setValue method expects plain objects that match the structure of your existing form controls, not new FormGroup objects.
• Your articleTagDetail is a FormArray, but you're trying to assign a single FormGroup to it. FormArrays require an array of values that match the structure of their child FormGroups.

Step 1: Fix the Basic Article Detail Population #

Your setBasicDetailForSelectedArticle was returning a new FormGroup, but we need to return a plain object that matches the articleBasicDetail FormGroup structure in your form. I also fixed a typo where you were assigning articleTitle to articleId – that would have caused issues even after fixing the main error!

private setBasicDetailForSelectedArticle(articleVM: ArticleViewModel) {
  // Return a plain object matching the form control names
  return {
    articleId: articleVM.articleId,
    articleTitle: articleVM.articleTitle,
    articleContent: articleVM.articleContent
  };
}

Step 2: Fix the Tag FormArray Population #

Since articleTagDetail is a FormArray, we need to first clear existing controls (or rebuild the array) to match the number of tags, then assign values that fit the array structure.

First, update your setTagDetailForSelectedArticle to return an array of tag values (assuming you have a full list of all available tags stored in this.allTags):

private setTagDetailForSelectedArticle(articleTagsVM: ArticleTagViewModel[]) {
  // Map all available tags to include isChecked status based on the selected article
  return this.allTags.map(tag => ({
    tagId: tag.tagId,
    tagName: tag.tagName,
    isChecked: articleTagsVM.some(articleTag => articleTag.tagId === tag.tagId)
  }));
}

Then, adjust your loadArticle method to rebuild the FormArray before setting values:

private loadArticle(selectedArticleID: string) {
  this.articleService.getArticle(selectedArticleID)
    .subscribe(
      (data: ArticleViewModel) => {
        const _a = new ArticleViewModel(data);
        
        // Update basic article detail (patchValue is more flexible than setValue)
        this.articleDetailForm.patchValue({
          articleBasicDetail: this.setBasicDetailForSelectedArticle(_a)
        });

        // Rebuild the tag FormArray
        this.tagFormArray.clear(); // Clear existing controls
        const tagValues = this.setTagDetailForSelectedArticle(_a.ArticleTagViewModels);
        // Add a FormGroup for each tag to the array
        tagValues.forEach(tag => {
          this.tagFormArray.push(this.formBuilder.group({
            tagId: tag.tagId,
            tagName: tag.tagName,
            isChecked: tag.isChecked
          }));
        });
      },
      (err) => {
        console.log(err);
      }
    );
}

Step 3: Verify Initial Form Setup #

Make sure your createArticleDetailForm correctly initializes the tagFormArray with controls for all available tags:

private createArticleDetailForm() {
  let articleId = 'Dummy ID';
  let articleTitle = 'Dummy Title';
  let articleContent = 'Dummy Content';

  // Initialize tagFormArray with default controls for all tags
  this.tagFormArray = this.formBuilder.array(
    this.allTags.map(tag => this.formBuilder.group({
      tagId: tag.tagId,
      tagName: tag.tagName,
      isChecked: false
    }))
  );

  this.articleDetailForm = this.formBuilder.group({
    articleBasicDetail: this.formBuilder.group({
      articleId: [{ value: articleId, disabled: true }, Validators.required],
      articleTitle: [articleTitle, Validators.required],
      articleContent: [articleContent, Validators.required],
    }),
    articleTagDetail: this.tagFormArray
  });
}

Why This Works #

• patchValue (or setValue) expects plain objects that mirror the form's control structure – not new FormGroup instances.
• FormArrays require an array of values (or controls) that match their child structure. By rebuilding the FormArray with controls for each tag, we ensure the structure matches what the form expects.

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