我有一个表单,我使用了我在表单中使用的模型类AskQuestionViewModel作为ngModel。当我提交表单时,模型字段始终为空值.Model绑定正在工作但是questionVM的值在onSubmit中始终为null ()。 这是我的代码:
<form (ngSubmit)="submitQuestion()" #questionVM="ngForm" class="form-horizontal" role="form">
<div [hidden]="title.valid || title.pristine"
class="alert alert-danger">
Please type your question and then click ask!!
</div>
<input type="text" class="form-control search-input fixed-height" #searchText placeholder="Ask here" id="title"
[(ngModel)]="questionVM.title" required name="title" #title="ngModel" (keyup)=filterQuestions() />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default fixed-height" data-toggle="collapse" data-target="#question-details" (click)="showDetailsQuestionsPanel(searchText)" aria-expanded="false"><span class="caret"></span></button>
<div id="question-details" class="dropdown-menu dropdown-menu-right search-menu" role="menu">
<div class="question-components">
<label> Categories {{questionVM.categoryId}} {{ questionVM.title}}</label>
<select class="form-control catagory-dropdown" id="Category" required [(ngModel)]="questionVM.categoryId" name="category" #category="ngModel">
<option *ngFor="let category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<div [hidden]="category.valid || category.pristine" class="alert alert-danger">
You must select a category for question
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary fixed-height" [disabled]="!questionVM.form.valid"><span class="glyphicon glyphicon-search" aria-hidden="true"></span><span style="padding-left:5px">Ask</span></button>
</div>
</div>
</form>
组件类
export class ApSearchComponent {
question: Question;
questionVM = new AskQuestionViewModel("", "", -1);
constructor(private router: Router, private categoryService: CategoryService, private questionsService: QuestionAnswerService, myElement: ElementRef) {
}
submitQuestion() {
console.log("Form submit");
this.question = new Question();
this.question.title = this.questionVM.title;
this.question.body = "";
this.question.categoryId = this.questionVM.categoryId;
this.questionsService.addQuestions(this.question).subscribe(res => {
this.question = res;
console.log(" " + res);
this.router.navigate(['/question/home']);
});
}
}