CODEWITHSUNDEEP
angular
Emmanuel Edward
Emmanuel Edward

Reputation: 21

ERROR TypeError: Cannot read property 'value' of undefined

Please i am new to Angular and i am following a tutorial by Felipe Coury. in a chapter of the book(writing your first angular 2 web application), He uses ".value" to display the title and the link in which we are to input. for him it worked well but on my system it keeps showing "ERROR TypeError: Cannot read property 'value' of undefined". i don't know if it is because i upgraded my angular cli to 4.5.0. please if you have a solution kindly help me.

This are my codes

    app.component.ts

    import { Component } from '@angular/core';
    import { Article } from 'app/article/article.model';

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean {
    console.log(`Adding article title: ${title.value} and link: 
    ${link.value}`);

    this.articles.push(new Article (title.value, link.value, 0));
    title.value='';
    link.value='';
    return false;
    }
    articles:Article[];

    constructor() {
    this.articles = [
    new Article ('Angular 2', 'http://www.angular.io', 3),
    new Article ('Fullstack', 'http://www.fullstack.io', 10),
    new Article ('Anguar Home page', 'http://www.angular.io', 4)
    ]
    }
    }

this is the app.component.html

    app.component.html
    <form class="ui large form segment">
    <h3 class="ui header">Add a Link</h3>

    <div class="field">
    <label for="title">Title:</label>
    <input name="title"  #newtitle>
    </div>
    <div class="field">
    <label for="link">Link:</label>
    <input  name="link"  #newlimk>
    </div>

    <button (click)="addArticle(newtitle, newlink)"
     class="ui positive right floated button">
    Submit link
    </button>
    </form>
    <div class="ui grid posts">
    <app-article
    *ngFor="let foobar of articles"
    [article]="foobar">
    </app-article>
    </div>

Thanks!

Upvotes: 2

Views: 6146

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71911

You should use 

 <input name="link" #newlink>

So.. newlink instead of newlimk

Upvotes: 1

Related Questions