Gabriel M Fernandes Gabriel M Fernandes - 7 months ago 48
HTML Question

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

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]

Answer

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: []
            })
        });
    }
}