0

Getting error in Chrome Console: EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'applicationName' of null.

Model: export class BasicInfoModel {

    applicationName: string;
    localDirectoryPath: string; 
}

Controller emitting data to parent component, parent component there it is saved to services.

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

}

What i want to achieve:

  1. When i build my code, i want my formGroup should be populated with null values.
  2. when i filled the data and saved it to behaviourSubject in my services, latter when i revisit the page my formGroup should be in sync with data services.

1 Answer 1

1

Modified the Controler by adding : (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));
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.