Angular2 ngForms模型类总是获得空值

时间:2016-11-28 13:39:34

标签: forms angular

我有一个表单,我使用了我在表单中使用的模型类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']);
        }); 
    }
}

0 个答案:

没有答案