Chrome 控制台中出现错误:异常:错误:未捕获( promise 中):TypeError:无法读取 null 的属性“applicationName”。
型号: 导出类 BasicInfoModel {
applicationName: string;
localDirectoryPath: string;
}
Controller 向父组件发送数据,父组件将数据保存到服务中。
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 });
}
}
我想要实现的目标:
- 当我构建代码时,我希望我的 formGroup 应该填充空值。
- 当我填写数据并将其保存到我的服务中的behaviorSubject时,稍后当我重新访问该页面时,我的formGroup应该与数据服务同步。
最佳答案
通过添加以下内容修改了 Controller :(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));
}
关于javascript - 使用 null 值填充 FormGroup 并,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39844027/