Реактивная форма SetValue для массива FormGroup внутри наблюдаемого метода подписки - PullRequest
Новая
       34

Реактивная форма SetValue для массива FormGroup внутри наблюдаемого метода подписки

0 голосов
/ 25 мая 2018

Я новичок в Angular, но пытаюсь понять, как мы можем использовать Reactive Form и массив FormGroups, когда мы используем Service Observable.

Моя форма очень проста, в ней есть список статей, где вы можетеМожно выбрать один из них и редактировать детали.Также есть возможность добавить новую статью.

Итак, начиная с самой страницы, она имеет список статей в левой части и реактивную пустую форму на другой стороне.Теперь эта форма также содержит некоторые флажки, которые предоставляют теги для статьи.

Теперь, когда я загружаю страницу, все идет как положено.Статьи приходят, и реактивная форма также загружается вместе со всеми тегами (не проверено)

Когда я щелкаю любую статью, чтобы сделать ее редактируемой, я получаю сообщение об ошибке "Необходимо указать значение для управления формойпо индексу: 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
});

}

ОШИБКА Ошибка: необходимо указать значение для элемента управления формы с именем: «articleId».Ошибка: «Необходимо указать значение для управления формой с индексом: 0.»

...