nested array in formgroup giving error: this.validator is not a function

Question

我试图限制用户在 `forumpost` 上只能投票一次。一段时间以来，我一直在努力正确使用数组来处理 angular 中的此功能。

现在我的代码在加载所有 forumposts 时失败。错误发生在构建 formgroups 时，当我的 upVoters: string[] 中有超过 1 个 userId 时，所以我假设我的数组是错误的。非常感谢任何帮助、提示或指出正确的方向！

我的想法：

add upVoters: string[] to Forumpost class.
push userId into string[] when voting
compare if userId is already in the voters string[]
true => remove userId from array
false => add userId to array

在我开始使用多个 userIds.
加载数组之前，它工作得很好，在对 SO 和其他编码博客以及类似内容进行了大量研究之后，我找不到答案这能够帮助我解决我的问题，所以我决定向社区寻求帮助。我找到了几篇嵌套 FormArrays 的文章，但 none 我发现它们能够帮助我处理我的用例，或者我可能不明白如何正确实施

我在我的 forum.service.ts 文件中定义我的实体和我的映射函数，这样我就可以在我的应用程序的任何地方使用它们

    export class ForumPost {
      id: string;
      title: string;
      writerId: string;
      upVoters: string[];
    
      constructor() {
        this.id = '';
        this.title = '';
        this.writerId = '';
        this.upVoters = [];
      }
    }

    mapFormToForumPost(form: FormGroup): ForumPost {
        const forumPost = form.getRawValue();
        return forumPost;
    }
    
    mapForumPostToForm(forumPost: ForumPost): FormGroup {
      const form = this.formBuilder.group(forumPost);
      this.handleVotesFromForumPostForForm(form, forumPost.upVoters);
      return form;
    }


    handleVotesFromObjectToForm(form: FormGroup, arrayUpVoters: string[]) {
      form.removeControl('upVoters');
      if (arrayUpVoters && arrayUpVoters.length === 0) {
        const upVotersForForm = [];
        form.addControl('upVoters', this.formBuilder.array(upVotersForForm))
      } else {
        const upVotersForForm = [];
        for (const item of arrayUpVoters) {
          upVotersForForm.push(item);
      }
      form.addControl('upVoters', this.formBuilder.array(upVotersForForm))
    }

在我的应用程序中，我有一个页面，我在其中使用 http.get 调用来获取所有论坛帖子，就像这样。在 forumList.component.ts 文件

的 ngOnInit() 中调用了 http 请求

      forumPosts: FormGroup[] = [];
    
      constructor(private forumService: ForumService, private formBuilder: FormBuilder, private formHelper: FormHelper ) {}

      loadTopics() {
        this.forumService.getForumPosts(this.postsPerPage, this.currentPage)
          .subscribe(response => {
            for (const forumPost of response.forumPosts) {
              console.log(forumPost);
              this.forumPosts.push(this.formBuilder.group(forumPost));
              for (const post of this.forumPosts) {
                this.formHelper.disableControls(post);
              }
            }
            this.totalPosts = response.maxPosts;
          });
      }

我对应的HTML看起来像这样forumList.component.html

    <mat-card class="outerCard" *ngIf="this.forumPosts.length > 0">
      <forum-list-post
       *ngFor="let forumPostForm of forumPosts | sort: 'votes'"
       [forumPostForm]="forumPostForm"
      ></forum-list-post>
    </mat-card>

在我的代码中的相应位置跟踪我的错误堆栈跟踪。通过 formbuilder 构建 formgroup 时，您会看到它失败了。在映射到 formGroup 之前，我添加了 forumPost 的控制台日志。

Answer 1

对于在这里遇到同样问题的任何人，我是如何解决我的问题的。我决定通过稍微更改映射函数来重构我的 forum.service 文件。我没有使用 formbuilder 来构建 formgroup，而是像这样在我的映射函数中自己定义了 formgroup。

  mapForumPostToForm(forumPost: ForumPost): FormGroup {
    const newform = new FormGroup({
      id: new FormControl(forumPost.id),
      title: new FormControl(forumPost.title),
      writerId: new FormControl(forumPost.writerId),
      upVoters: this.formBuilder.array(forumPost.upVoters),
    });
    return newform;
  }

这样做的缺点是，当我向我的 forumPost 实体添加新变量时，我需要在此处添加字段。因为它位于我的 forum.service.ts 文件中，所以我只需要确保在向我的实体

添加新变量时不要忘记

nested array in formgroup giving error: this.validator is not a function

nested array in formgroup giving error: this.validator is not a function

javascript

arrays

typescript

angular

angular8