Füllen Sie FormGroup mit Nullwert und

Question

Fehler in der Chrome-Konsole: EXCEPTION: Fehler: Nicht abgefangen (in Versprechen): TypeError: Kann Eigenschaft 'ApplicationName' von Null nicht lesen.

Modell: Export Klasse BasicInfoModel {

applicationName: string; 
    localDirectoryPath: string; 
} 

Controller-Emissionsdaten an übergeordnete Komponente, Stammkomponente wird es auf Dienste gespeichert.

Controller:

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 }); 
} 

} 

Was ich erreichen möchte:

1. Wenn ich meinen Code zu bauen, möchte ich meine formGroup mit null Werten gefüllt werden sollen.
2. wenn ich die Daten gefüllt und in behaviouSubject in meinen Diensten gespeichert habe, sollte letztere, wenn ich die Seite erneut besuche, meine formGroup mit Datendiensten synchronisieren.

Answer 1

Verändert die Controler durch Zugabe von: (! This.observableBasic = undefined)

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)); 
}