Typescript 角2服务及；Formbuilder：使用服务返回的值填充表单

我希望能得到一些帮助

我试图弄清楚如何使用Formbuilder组中服务订阅中定义的变量

我正在定义

这一点。请注意，我的服务订阅中的
：

noteService.getNote(this.id)
    .subscribe((res: Response) =>{
       // this.note is defined here and works fine in my @View template decoration
       this.note = new Note(res.note.title, res.note.body, res.note.subject_id, res.note.created_at, res.note.updated_at)
  })

我在Formbuilder声明中引用了它：

 this.noteForm = fb.group({
     title: [this.note.title, Validators.required]
 })

我怎样才能使
这个.note
可用于Formbuilder声明？我当前收到以下错误：

EXCEPTION: TypeError: Cannot read property 'validator' of undefined in [noteForm in NoteComponent@1:14]BrowserDomAdapter.logError @ angular2.dev.js:23514BrowserDomAdapter.logGroup @ angular2.dev.js:23525ExceptionHandler.call @ angular2.dev.js:1145(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:142(anonymous function) @ angular2.dev.js:5719NgZone.run @ angular2.dev.js:5681(anonymous function) @ angular2.dev.js:14884schedulerFn @ angular2.dev.js:14385tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963EventEmitter.emit @ angular2.dev.js:14366(anonymous function) @ angular2.dev.js:5612run @ angular2-polyfills.js:139NgZone._notifyOnTurnDone @ angular2.dev.js:5611(anonymous function) @ angular2.dev.js:5726zoneBoundFn @ angular2-polyfills.js:112lib$es6$promise$asap$$flush @ angular2-polyfills.js:1306
angular2.dev.js:23514 ORIGINAL EXCEPTION: TypeError: Cannot read property 'validator' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1154(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:142(anonymous function) @ angular2.dev.js:5719NgZone.run @ angular2.dev.js:5681(anonymous function) @ angular2.dev.js:14884schedulerFn @ angular2.dev.js:14385tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963EventEmitter.emit @ angular2.dev.js:14366(anonymous function) @ angular2.dev.js:5612run @ angular2-polyfills.js:139NgZone._notifyOnTurnDone @ angular2.dev.js:5611(anonymous function) @ angular2.dev.js:5726zoneBoundFn @ angular2-polyfills.js:112lib$es6$promise$asap$$flush @ angular2-polyfills.js:1306
angular2.dev.js:23514 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1157(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:142(anonymous function) @ angular2.dev.js:5719NgZone.run @ angular2.dev.js:5681(anonymous function) @ angular2.dev.js:14884schedulerFn @ angular2.dev.js:14385tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963EventEmitter.emit @ angular2.dev.js:14366(anonymous function) @ angular2.dev.js:5612run @ angular2-polyfills.js:139NgZone._notifyOnTurnDone @ angular2.dev.js:5611(anonymous function) @ angular2.dev.js:5726zoneBoundFn @ angular2-polyfills.js:112lib$es6$promise$asap$$flush @ angular2-polyfills.js:1306
angular2.dev.js:23514 TypeError: Cannot read property 'validator' of undefined
    at NgFormModel.ngOnChanges (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:17831:73)
    at AbstractChangeDetector.ChangeDetector_NoteComponent_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:10897:14), <anonymous>:46:59)
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8824:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8807:12)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8877:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8811:12)
    at AbstractChangeDetector._detectChangesContentChildren (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8871:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8808:12)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8877:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8811:12)

异常：TypeError:无法读取[noteForm]中未定义的属性“validator”NoteComponent@1：14]BrowserDomAdapter.logError@angular2.dev.js:23514BrowserDomAdapter.logGroup@angular2.dev.js:23525ExceptionHandler.call@angular2.dev.js:1145（匿名函数）@angular2.dev.js:14801NgZone.\u notifyOnError@angular2.dev.js:5796 collection\u 1.StringMapWrapper.merge.onError@angular2.dev.js:5700run@angular2 polyfills.js:142（匿名函数）@angular2.dev.js:5719NgZone.run@angular2.dev.js:5681（匿名函数）@angular2.dev.js:14884 schedulerfn@angular2.dev.js:14385tryCatcher@Rx.js:31Subscriber.next@Rx.js:9999Subject.next@Rx.js:9963EventEmitter.emit@angular2.dev.js:14366（匿名函数）@angular2.dev.js:5612run@angular2 polyfills.js:139NgZone.\u notifyOnTurnDone@angular2.dev.js:5611（匿名函数）@angular2.dev.js:5726 ZoneBoundfn@angular2 polyfills.js:112lib$es6$promise$asap$$flush@angular2 polyfills.js:1306
angular2.dev.js:23514原始异常：TypeError:无法读取undefinedBrowserDomAdapter.logError@angular2.dev.js:23514ExceptionHandler.call@angular2.dev.js:1154（匿名函数）的属性“validator”@angular2.dev.js:14801NgZone.\u notifyOnError@angular2.dev.js:5796 collection\u 1.StringMapWrapper.merge.onError@angular2.dev.js:5700run@angular2 polyfills.js:142（匿名函数）@angular2.dev.js:5719NgZone.run@angular2.dev.js:5681（匿名函数）@angular2.dev.js:14884 schedulerfn@angular2.dev.js:14385tryCatcher@Rx.js:31Subscriber.next@Rx.js:9999Subject.next@Rx.js:9963EventEmitter.emit@angular2.dev.js:14366（匿名函数）@angular2.dev.js:5612run@angular2 polyfills.js:139NgZone.\u notifyOnTurnDone@angular2.dev.js:5611（匿名函数）@angular2.dev.js:5726 ZoneBoundfn@angular2 polyfills.js:112lib$es6$promise$asap$$flush@angular2 polyfills.js:1306
angular2.dev.js:23514原始STACKTRACE:BrowserDomAdapter.logError@angular2.dev.js:23514ExceptionHandler.call@angular2.dev.js:1157（匿名函数）@angular2.dev.js:14801NgZone.\u notifyOnError@angular2.dev.js:5796集合\u 1.StringMapWrapper.merge.onError@angular2.dev.js:5700run@angular2 polyfills.js:142（匿名函数）@angular2.dev.js:5719NgZone.run@angular2.dev.js:5681（匿名函数）@angular2.dev.js:14884schedulerFn@angular2.dev.js:14385tryCatcher@Rx.js:31Subscriber.next@Rx.js:9999Subject.next@Rx.js:9963EventEmitter@angular2.dev.js:14366（匿名函数）@angular2.dev.js:5612run@angular2 polyfills.js:139NgZone.\u notifyOnTurnDone@angular2.dev.js:5611（匿名函数）@angular2.dev.js:5726zoneBoundFn@angular2 polyfills.js:112lib$es6$promise$asap$$flush@angular2 polyfills.js:1306
angular2.dev.js:23514 TypeError:无法读取未定义的属性“validator”
在NgFormModel.ngOnChanges(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:17831:73)
在AbstractChangeDetector.ChangeDetector\u NoteComponent\u 0.DetectChangesRecords内部（在(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:10897:14), :46:59)
在AbstractChangeDetector.detectChangesInRecords(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8824:14)
在AbstractChangeDetector.runDetectChanges(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8807:12)
在AbstractChangeDetector.\u检测视图子项中的更改(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8877:14)
在AbstractChangeDetector.runDetectChanges(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8811:12)
在AbstractChangeDetector.\u检测更改内容儿童(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8871:14)
在AbstractChangeDetector.runDetectChanges(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8808:12)
在AbstractChangeDetector.\u检测视图子项中的更改(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8877:14)
在AbstractChangeDetector.runDetectChanges(http://localhost:3000/assets/angular2/bundles/angular2.dev.js:8811:12)

我已经在下面的相关代码中粘贴了注释，在这些注释中变量应该相互对话


从'angular2/core'导入{组件，视图}
从“angular2/ROUTER”导入{ROUTER_指令}；
从“angular2/common”导入{CORE_指令}
从“rxjs/Rx”导入Rx
从'angular2/http'导入{Response}
从“../../services/note/NoteService.ts”导入{NoteService}”；
从“angular2/ROUTER”导入{ROUTER_PROVIDERS}；
从“angular2/router”导入{RouteParams}；
从“./MarkdownRenderer/MarkdownRenderer.ts”导入{MarkdownRenderer}；
从“./../models/Note/Note.ts”导入{Note}
从“angular2/common”导入{FORM_指令}；
从“angular2/common”导入{FormBuilder}；
从“angular2/common”导入{Validators}；
@组成部分({
选择器：“noteComponent”，
提供者：[注意服务]
})
@看法({
指令：[MarkdownRenderer，FORM_指令]
模板：`
{{getDate（note.created_at）}
标题
import { Component, View } from 'angular2/core'
import { ROUTER_DIRECTIVES } from "angular2/router";
import { CORE_DIRECTIVES } from "angular2/common"
import Rx from 'rxjs/Rx'
import {Response} from 'angular2/http'
import {NoteService} from "../../services/note/NoteService.ts";
import {ROUTER_PROVIDERS} from "angular2/router";
import {RouteParams} from "angular2/router";
import {MarkdownRenderer} from "../markdownRenderer/markdownRenderer.ts";
import { Note } from "../../models/note/note.ts"
import {FORM_DIRECTIVES} from "angular2/common";
import {FormBuilder} from "angular2/common";
import {Validators} from "angular2/common";

@Component({
    selector: 'noteComponent',
    providers: [NoteService]
})

@View({
    directives: [MarkdownRenderer, FORM_DIRECTIVES]
    template: `
        <form [ngFormModel]="noteForm" (ngSubmit)="onSubmit(noteForm.value)">
        <div class="row animated">
            <div class="medium-10 columns medium-centered">
                <div *ngIf="note">
                    <div class="date-and-title animated fadeInDown">
                        <div class="medium-8 columns">
                            <h1 class="note-date">{{getDate(note.created_at)}}</h1>
                            <!--I'm trying to populate [ngFormControl]="noteForm.controls['title']"-->
                            <span>Title</span> <input type="text" class="note-title" [ngFormControl]="noteForm.controls['title']" *ngIf="note.title">
                        </div>
                        <div class="medium-4 columns end">
                           <input type="submit" class="button" value="Submit">
                        </div>

                    </div>
                    <div class="body">
                        <markdownRenderer [note]="note"></markdownRenderer>
                    </div>
                </div>
            </div>
        </div>
        </form>
    `
})

export class NoteComponent {
    note: Note

    constructor(noteService: NoteService, params: RouteParams, fb: FormBuilder){
        this.id = params.get('id')

        noteService.getNote(this.id)
            .subscribe((res: Response) =>{
                // this.note is defined here and works fine in my @View template decoration
                this.note = new Note(res.note.title, res.note.body, res.note.subject_id, res.note.created_at, res.note.updated_at)

                console.log(this.note) //note is logged as expected

                this.noteForm = fb.group({
                    title: [this.note.title, Validators.required] // TypeError: Cannot read property 'validator' of undefined in [noteForm in NoteComponent@1:14]
                })
            })
    }
}

constructor(noteService: NoteService, params: RouteParams, fb: FormBuilder){
    this.id = params.get('id')

    noteService.getNote(this.id)
        .subscribe((res: Response) =>{
            this.note = new Note(res.note.title, res.note.body, res.note.subject_id, res.note.created_at, res.note.updated_at)
            console.log(this.note)
            this.noteForm = fb.group({
                title: [this.note.title, Validators.required]
            })
}