Angular Reactive Form：无法设置未定义的属性

Posted 2023-03-13

【中文标题】Angular Reactive Form：无法设置未定义的属性

【英文标题】：Angular Reactive Form : Cannot set property of undefined

【发布时间】：2018-06-28 11:59:38

【问题描述】：

我被 Angular5 ReactiveForm 卡住了。 实际上，我创建了一个基本模型子

sub.model.ts：

export interface Subscription 
    name: string;

我还有一个组件 : : 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 模板：

<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 时，控制台出现错误。

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 版本，但问题仍然存在。 如何赋值？

【问题讨论】：

你能给我们看看 subscribe.component.ts 吗？

代码中email的属性在哪里

不是电子邮件，而是姓名。我更改了代码，订阅组件是子组件。一样的

【参考方案1】：

当我使用 ReactiveForms 时，我喜欢有两个变量：data 和 dataForm（在你的情况下是 sub 和 subForm）和一个函数 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]
   )

【讨论】：

this.subForm.buildForm()你不会犯错吧？

谢谢！！，我更新了帖子（还有一个错误，是this.buildForm in subscribe

【参考方案2】：

我认为这是因为您使用了错误的对象。你只有 sub 的声明。在您的组件中应该是：

sub: Subscription = <Subscription>name:"" ;
subscribe() 
    this.sub.name = this.subForm.value.name;

这是没有错误的示例https://stackblitz.com/edit/angular-atjwke

【讨论】：

是的，它可以工作，但我想将表单值分配给变量，而不是表单值的变量。为了测试代码，我将占位符变量放在子对象中

stackblitz.com/edit/angular-atjwke 检查更新的示例，您必须初始化子实例

有效！！谢谢。但是代码非常收费。你不知道为什么我有这个问题。我无法为 undefined var 分配新值

“是的，它可以工作，但我想将表单值分配给变量，而不是表单值的变量。”你遇到了这个问题，因为如果你想在任何对象上分配属性，这个对象必须存在，甚至像 let obj =;错误类型错误：无法设置未定义的属性“电子邮件” - 这对表单或反应式表单没有问题。您有未定义的对象，并且您正在使用它的属性

感谢您的解释。我关闭这个话题。