角反应形式:无法设置未定义的属性 [英] Angular Reactive Form : Cannot set property of undefined
问题描述
我被Angular5 ReactiveForm困扰.
实际上,我创建了一个基本模型子
I'm stuck with Angular5 ReactiveForm.
Actually, I create a basic model sub
sub.model.ts :
export interface Subscription {
name: string;
}
我也有一个组件:: sub.component.ts
I also have a component : : sub.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Sub } from '@models/sub.model';
@Component({
selector: 'md-subscribe',
templateUrl: './subscribe.component.html',
styleUrls: ['./subscribe.component.scss']
})
export class SubComponent {
subForm: FormGroup;
sub: Subscription;
constructor(private builder: FormBuilder) {
this.subForm = this.builder.group({
name : ['', Validators.required]
});
}
subscribe() {
this.sub.name = 'test value';
}
}
最后,一个html模板:
And to conclude, a html template :
<form class="form align-end" [formGroup]="subscribeForm" (ngSubmit)="subscribe()">
<h2 class="label label--blue">S'inscrire</h2>
<div class="form-group"><input type="text" id="name" name="name" formControlName="name" placeholder="Hubert" required /></div>
</form>
所以我尝试提交表格.我可以用this.subForm.value
来获取值,但是当我尝试分配值test value
或this.subForm.value.name
时,控制台出现错误.
So I try to submit the form. I can get the value with this.subForm.value
but when I try to assign value test value
or this.subForm.value.name
, I have an error in console.
ERROR TypeError: Cannot set property 'email' of undefined
at SubscribeComponent.subscribe (subscribe.component.ts:24)
at Object.eval [as handleEvent] (SubscribeComponent.html:1)
at handleEvent (core.js:13581)
at callWithDebugContext (core.js:15090)
at Object.debugHandleEvent [as handleEvent] (core.js:14677)
at dispatchEvent (core.js:9990)
at eval (core.js:12332)
at SafeSubscriber.schedulerFn [as _next] (core.js:4351)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
at SafeSubscriber.next (Subscriber.js:187)
实际上,我的对象sub是未定义的,但是为什么我不能赋值.我也更改了zone.js版本,但问题仍然存在. 如何分配值?
In fact, my object sub is undefined but why I can't assign value. I also changed zone.js version but problem still. How can I assign value ?
推荐答案
在使用ReactiveForms时,我喜欢有两个变量:data和dataForm(在您的情况下为sub和subForm)和一个函数buildForm
When I'm working with ReactiveForms, I like have two variables:data and dataForm (in your case sub and subForm) and a function buildForm
subForm: FormGroup;
sub: Subscription;
constructor(private builder: FormBuilder) {}
//For example in ngOnInit
ngOnInit()
{
this.buildForm();
}
//or when we subscribe
subscribe() {
this.sub.name = 'test value'; //<--give value to the "data"
this.subForm=this.buildForm(this.sub); //<--create a groupForm with the data
}
//Our function buildForm return a formGroup
buildForm(sub:Subscription|null)
{
return this.builder.group({
name : [sub? sub.name:'', Validators.required]
})
}
这篇关于角反应形式:无法设置未定义的属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!