【发布时间】：2016-06-09 23:43:46
【问题描述】：
我有一个应用程序，其中包含包含文章的主题。当用户创建一篇文章时，我希望他们从显示可用主题的下拉列表中选择一个主题以将文章与之关联。这个 UI 方面向用户展示了一个目前看起来正确的表单，但是，主题对象没有与表单一起传递，我不明白为什么。有人可以帮我理解这应该怎么做吗？
这里的相关部分如下： 这是我表单中的 select 语句，它正确地显示了我想要呈现给用户的主题的选项。
<select [ngFormControl]="myForm.find('topic')" id="topic" class="form-control" required>
<option *ngFor="let a of topics" [value]="a">{{a.title}}</option>
</select>
当我尝试验证我是否收到了我正在寻找的数据时，我收到此行的“未定义”错误：
console.log(this.myForm.value.topic.title);
如果我这样做，我会得到 [object, object]
console.log(this.myForm.value.topic);
提交给服务的是这样的：
Object { content: "8th content", title: "8th title", articleId: "57588eaf1ac787521d15ac34", username: "Jason", userId: Object, topicId: undefined }
有人可以帮助我了解我在这里缺少什么以便能够将此表单选择标签的结果发送到我的 Angular2 表单中吗？
我的整篇文章-input.component.ts 文件
import { Component, OnInit } from '@angular/core';
import {Article} from './article';
import {ArticleService} from "./article.service";
import {ErrorService} from "../errors/error.service";
import { FormBuilder, ControlGroup, Validators, Control } from '@angular/common';
import {TopicService} from "../topics/topic.service";
import {Topic} from "../topics/topic";
@Component({
selector: 'my-article-input',
template: `
<section class="col-md-8 col-md-offset-2">
<form [ngFormModel]="myForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="title">Title</label>
<input [ngFormControl]="myForm.find('title')" type="text" id="title" class="form-control" #input [value]="article?.title">
</div>
<div class="form-group">
<label for="content">Content</label>
<input [ngFormControl]="myForm.find('content')" type="text" id="content" class="form-control" #input [value]="article?.content">
</div>
<select [ngFormControl]="myForm.find('topic')" id="topic" class="form-control" required>
<option *ngFor="let a of topics" [value]="a">{{a.title}}</option>
</select>
<button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">{{ !article ? 'Add Article' : 'Save Article' }}</button>
<button type="button" class="btn btn-danger" (click)="onCancel()" *ngIf="article">Cancel</button>
</form>
</section>
`
})
export class ArticleInputComponent implements OnInit {
myForm: ControlGroup;
article: Article = null;
constructor(private _fb:FormBuilder, private _articleService: ArticleService, private _errorService: ErrorService, private _topicService: TopicService ) {}
topics: Topic[];
onSubmit() {
console.log(this.myForm.value.topic.title);
if (this.article) {
// Edit
this.article.content = this.myForm.value.content;
this.article.title = this.myForm.value.title;
this.article.topicId = this.myForm.value.topic.topicId;
this._articleService.updateArticle(this.article)
.subscribe(
data => console.log(data),
error => this._errorService.handleError(error)
);
this.article = null;
} else {
const article: Article = new Article(this.myForm.value.content, this.myForm.value.title, null, 'DummyArticleInput', this.myForm.value.topic);
this._articleService.addArticle(article)
.subscribe(
data => {
console.log(data);
this._articleService.articles.push(data);
},
error => this._errorService.handleError(error)
);
}
}
onCancel() {
this.article = null;
}
ngOnInit() {
this.myForm = this._fb.group({
title: ['', Validators.required],
content: ['', Validators.required],
topic: ['', Validators.required]
});
this._articleService.articleIsEdit.subscribe(
article => {
this.article = article;
}
);
this._topicService.getTopics().subscribe(
topics => {
this.topics = topics;
this._topicService.topics = topics
},
error => this._errorService.handleError(error)
);
}
}
【问题讨论】：
标签： node.js forms mongodb drop-down-menu angular