Cannot read property ' name' of undefined in user.name in NewUserComponent

Question

I'm trying to implement validations in a form for creating new users, which is this:

<div class="col-lg-7 well">
    <form [ngFormModel]="form" (ngSubmit)="save()" class="form-horizontal">
        <fieldset>
            <legend class="text-center">User</legend>
            <div class="form-group">
                <label for="name" class="col-lg-2 control-label">Name</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.name" #name="ngForm" ngControl="name" type="text" class="form-control">
                </div>

                <!-- Name Errors -->
                <span *ngIf="name.touched && name.errors.required" class="text-danger">
                    Name is required
                </span>
                <!-- / -->
            </div>
            <div class="form-group">
                <label for="email" class="col-lg-2 control-label">E-mail</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.mail" #email="ngForm" ngControl="email" type="email" class="form-control" required>
                </div>

                <!-- E-mail Errors -->
                <span *ngIf="email.touched" class="text-danger">
                    Please enter a valid e-mail
                </span>
                <!-- / -->
            </div>
            <div class="form-group">
                <label for="phone" class="col-lg-2 control-label">Phone</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.phone" type="tel" class="form-control">
                </div>
            </div>
        </fieldset>
        <fieldset ngControlGroup="address">
            <legend class="text-center">Address</legend>
            <div class="form-group">
                <label for="street" class="col-lg-2 control-label">Street</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.address.street" ngControl="street" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="suite" class="col-lg-2 control-label">Suite</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.address.suite" ngControl="suite" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="city" class="col-lg-2 control-label">City</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.address.city" ngControl="city" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="zipCode" class="col-lg-2 control-label">Zip Code</label>
                <div class="col-lg-10">
                    <input [(ngModel)]="user.address.zipCode" ngControl="zipCode" type="number" class="form-control">
                </div>
            </div>
            <button [disabled]="!form.valid" type="submit" class="btn btn-primary pull-right">
                <span class="glyphicon glyphicon-ok"></span>
                Submit
            </button>
        </fieldset>
    </form>
</div>

And this is the component:

import {Component} from 'angular2/core';
import {ControlGroup, FormBuilder, Validators} from 'angular2/common';

import {UserValidators} from './../../../validators/user/userValidators';

@Component({
    templateUrl: 'app/components/users/new/new-user.component.html',
})
export class NewUserComponent {
    form: ControlGroup;

    constructor(fb: FormBuilder) {
        this.form = fb.group({
            name: ['', Validators.required],
            email: ['', UserValidators.email],
            phone: [],
            address: fb.group({
                street: [],
                suite: [],
                city: [],
                zipcode: []
            })
        });
    }
}

I'm new to it and I'm following a course. Tried to look at the solution to find something but it always gives me the following error:

EXCEPTION: TypeError: Cannot read property 'name' of undefined in [user.name in NewUserComponent@7:27]

Why do you expect this to work? Your NewUserComponent doesn't have a user property. — Günter Zöchbauer
– Günter Zöchbauer, Commented May 1, 2016 at 18:07

Günter Zöchbauer · Accepted Answer · 2016-05-01 18:10:23Z

1

If you bind to a model using ngModel the property has to exist:

export class NewUserComponent {
    form: ControlGroup;

    user = {mail: 'mail', phone: 'phone', 
        address: {suite: 'suite', city: 'city', zipCode: '12345'}};

    constructor(fb: FormBuilder) {
        this.form = fb.group({
            name: ['', Validators.required],
            email: ['', UserValidators.email],
            phone: [],
            address: fb.group({
                street: [],
                suite: [],
                city: [],
                zipcode: []
            })
        });
    }
}

answered May 1, 2016 at 18:10

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

1 Comment

user4383363 Over a year ago

Thank you. Just by creating the Model class was enough. I'm totally new to it and I forgot I had to create it in order to model driven forms to work.

Collectives™ on Stack Overflow

Cannot read property ' name' of undefined in user.name in NewUserComponent

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related