Angular Reactive Form : Cannot set property of undefined

Question

I'm stuck with Angular5 ReactiveForm.
Actually, I create a basic model sub

sub.model.ts :

export interface Subscription {
    name: string;
}

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

}

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>

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)

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 ?

It's not email but name. I change the code and subscribe component is the sub component. Same thing — ghuntheur
– ghuntheur, Commented Jan 19, 2018 at 9:48

Eliseo · Accepted Answer · 2018-01-19 10:29:32Z

1

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

edited Jan 19, 2018 at 10:29

answered Jan 19, 2018 at 10:16

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ghuntheur Over a year ago

You don't do a mistake with this.subForm.buildForm() ?

Eliseo Over a year ago

thanks!!, I update the post (there was another error, is this.buildForm in subscribe

MateuszWkDev · Accepted Answer · 2018-01-19 10:16:22Z

1

I think it is because you are using wrong object. You have only declaration of sub. In your componentshould be:

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

Here is example without error https://stackblitz.com/edit/angular-atjwke

edited Jan 19, 2018 at 10:16

answered Jan 19, 2018 at 9:52

MateuszWkDev

5156 silver badges9 bronze badges

5 Comments

ghuntheur Over a year ago

Yeah it works but i want assigned the form value on a variable and not a variable on form value. To test the code, i put placeholder variable in sub object

MateuszWkDev Over a year ago

stackblitz.com/edit/angular-atjwke check updated example you must initialize you sub instance

ghuntheur Over a year ago

It works !! Thanks. But code is very charged. You don't know why i have this problem. I can't assign new value on undefined var

MateuszWkDev Over a year ago

"Yeah it works but i want assigned the form value on a variable and not a variable on form value." You had this problem because if you want assing propery on any object this object must exist even like let obj ={}; ERROR TypeError: Cannot set property 'email' of undefined - this is no problem with form, or reactive form. You have object which is undefined and you are using it's property

ghuntheur Over a year ago

Thank you for your explications. I close this topic.

Collectives™ on Stack Overflow

Angular Reactive Form : Cannot set property of undefined

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related