2

我是 Angular 的新手，但我想了解在使用 Service Observable 时如何使用 Reactive Form 和 FormGroups 数组。

我的表格很简单，它有文章列表，您可以在其中选择其中一个并可以编辑详细信息。它还具有添加新文章的功能。

因此，页面本身的开头，左侧有文章列表，另一侧有反应性空白表单。现在，此表单还包含一些为文章提供标签的复选框。

现在，当我加载页面时，一切都按预期进行。文章来了，反应形式也与所有标签一起加载（未选中）

当我单击任何文章以使其可编辑时，我收到错误“必须为索引处的表单控件提供值：0”。我试图稍微更改代码，但随着新错误开始出现“必须为表单控件提供一个值，名称为：'articleId'”

所以，总的来说，我没有得到什么是根本问题。似乎我缺少为表单组命名但不确定如何提供。

// 全局变量：从构造函数中调用。

articleDetailForm: FormGroup;
tagFormArray: FormArray = new FormArray([]);

// 虽然 this.loadArticle(this.selectedArticleId); 调用更改事件

private loadArticle(selectedArticleID: string) {
this.articleService.getArticle(selectedArticleID)
  .subscribe(
    (data: ArticleViewModel) => {
      const _a = new ArticleViewModel(data);
      debugger;
      this.articleDetailForm.setValue({
        articleBasicDetail: this.setBasicDetailForSelectedArticle(_a),
        articleTagDetail: this.setTagDetailForSelectedArticle(_a.ArticleTagViewModels)
      })
    },
    (err) => {
      console.log(err);
    });

}

private setBasicDetailForSelectedArticle(articleVM: ArticleViewModel) {
return new FormGroup({
  articleId: new FormControl(articleVM.articleTitle, ),
  articleTitle: new FormControl(articleVM.articleTitle),
  articleContent: new FormControl(articleVM.articleContent)
});

}

private setTagDetailForSelectedArticle(articleTagsVM: ArticleTagViewModel[]) {
// want to loop through variable and checked only those tags which are available for this article
return new FormGroup({
  tagId: new FormControl(111),
  tagName: new FormControl("111"),
  isChecked: new FormControl(true)
});

}

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

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
});

}

ERROR 错误：必须为表单控件提供一个值，名称为：“articleId”。ERROR 错误：“必须为索引处的表单控件提供一个值：0。”

4

0 回答 0