FormGroupにヌル値を設定して

Question

Chrome Consoleでエラーが発生しました。例外：エラー：未知（約束）：TypeError：nullの 'applicationName'プロパティを読み取ることができません。

モデル：親コンポーネントにデータを発する エクスポートクラスBasicInfoModel {

applicationName: string; 
    localDirectoryPath: string; 
} 

コントローラ、親コンポーネントが、それがサービスに保存されています。

コントローラー：

1. 私は私のコードをビルドすると、私は私のformGroupがnull値を移入する必要がありますしたい：私が達成したい何

   import { Component, Output, OnInit, EventEmitter} from '@angular/core'; 
   import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES, Validators,    
   FormBuilder, FormArray}from "@angular/forms"; 
   import { Observable } from "rxjs/Rx"; 
   import { BasicInfoModel } from '../basicinfomodel'; 
   import { BasicInfoService} from '../app.dev.basicinfo.service'; 
   
   @Component({ 
       selector: 'basic-info', 
       templateUrl: './basicInfo.html', 
       styleUrls: ['../../ComponentStyles.css'], 
       directives: [REACTIVE_FORM_DIRECTIVES] 
   }) 
   
   export class BASIC_INFOComponent implements OnInit { 
   
   observableBasic: BasicInfoModel; 
   basicInfoForm: FormGroup; 
   
   @Output() basicInfoUpdate = new EventEmitter<JSON>(); 
   @Output() basicInfoFormValid = new EventEmitter<Boolean>(); 
   
   constructor(private formBuilder: FormBuilder, private BasicInfoService:  
   BasicInfoService) { } 
   
   onSubmit() { 
       debugger; 
       this.observableBasic; 
       this.basicInfoUpdate.emit(this.basicInfoForm.value); 
   } 
   
   ngOnInit() { 
   
       this.basicInfoForm = new FormGroup({ 
        'applicationName': new FormControl('', Validators.required), 
        'localDirectoryPath': new FormControl('', Validators.required) 
       }); 
   
       this.basicInfoForm.valueChanges.subscribe(data => console.log('form 
       changes', data)); 
       this.BasicInfoService.currentBasicInfo 
        .subscribe(
        (basic: BasicInfoModel) => { 
         this.observableBasic = basic; 
        }); 
   
       (<FormGroup>this.basicInfoForm).setValue(this.observableBasic, { onlySelf: true }); 
   } 
   
   } 
   

   。

2. 私はデータを入力し、それを私のサービスのbehaviourSubjectに保存しました。後者はページを再訪するときに私のformGroupはデータサービスと同期する必要があります。

Answer 1

を追加することでのcontrolerを修正：（！this.observableBasic =未定義）

ngOnInit() { 
    this.basicInfoForm = new FormGroup({ 
     'applicationName': new FormControl('', Validators.required), 
     'localDirectoryPath': new FormControl('', Validators.required) 
    }); 

    this.BasicInfoService.currentBasicInfo 
     .subscribe((basic: BasicInfoModel) => { this.observableBasic = basic; }); 

    if (this.observableBasic != undefined) { 
     (<FormGroup>this.basicInfoForm).setValue(this.observableBasic, { onlySelf: true }); 
    }  

    this.basicInfoForm.valueChanges.subscribe(data => console.log('form changes', data)); 
}