Question

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

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

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

现在，当我加载页面时，一切都按预期进行。文章即将发布，反应形式也会加载所有标签（未经检查）

当我点击任何文章使其可编辑时，我收到错误＆＃34;必须在索引处为表单控件提供值：0。＆＃34; 我试图改变代码很少，但随之而来的是新的错误开始了＆＃34;必须为名称提供表单控件的值：＆＃39; articleId＆＃39;＆＃34;

所以，总的来说，我没有得到什么是根本问题。似乎我错过了给表单组命名，但不知道如何提供。

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

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

}

错误错误：必须为名称提供表单控件的值：＆＃39; articleId＆＃39;。错误错误：＆＃34;必须在索引处为表单控件提供值：0。＆＃34;

FormGroup数组的Reactive Form SetValue在可观察的订阅方法中

0 个答案: