why after adding the input type `url` angular throws an error

Question

After adding the commented part to the view. The app breaks and throws the following error. it shouldnt throw such error. why is it throwing that error. But when i remove the element just, every thing goes back to normal.

  ERROR TypeError: Cannot read property 'valid' of undefined
        at Object.eval [as updateDirectives] (AppComponent.html:30)
        at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13093)
        at checkAndUpdateView (core.es5.js:12270)
        at callViewAction (core.es5.js:12638)
        at execComponentViewsAction (core.es5.js:12570)
        at checkAndUpdateView (core.es5.js:12276)
        at callWithDebugContext (core.es5.js:13493)
        at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:13033)
        at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (core.es5.js:10189)
 (AppComponent.html:30) >>>>>>>>>>  <span class="help-block" *ngIf="!description.valid && description.touched">Please enter a valid description for the movie</span>

Full HTML Form

<section class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Add Movies</h3>
    </div>
    <div class="panel-body">
      <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class="form-group">
          <input type="text" class="form-control" id="movie-name" placeholder="Enter the Movie Name" ngModel name="movieName" required
            #name="ngModel" [ngClass]="{isValid: name.valid && name.touched, isInvalid: !name.valid && name.touched}">
          <span class="help-block" *ngIf="!name.valid && name.touched">Please enter a valid Movie Name</span>
        </div>
        <div class="form-group col-md-1" id="rating">
          <input type="number" class="form-control" name="rating" min="1" max="5" placeholder="Rating" size="15" ngModel="rating" required
            pattern="^[1-5]$" #rating="ngModel" [ngClass]="{isValid: rating.valid && rating.touched, isInvalid: !rating.valid && rating.touched}">
        </div>
        <span class="help-block clear" *ngIf="!rating.valid && rating.touched">Please Rate the Movie on a scale of 1 to 5</span>
        <div class="form-group">
          <input type="date" class="form-control" id="release-date" placeholder="Release Date" ngModel name="releaseDate" required
            #releaseDate="ngModel" [ngClass]="{isValid: releaseDate.valid && releaseDate.touched, isInvalid: !releaseDate.valid && releaseDate.touched}">
          <span class="help-block" *ngIf="!releaseDate.valid && releaseDate.touched">Please enter a valid Release Date</span>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" id="movie-description" placeholder="Enter the description of the Movie" ngModel name="movieDescription"
            required #description="ngModel" [ngClass]="{isValid: description.valid && description.touched, isInvalid: !description.valid && description.touched}">
          <span class="help-block" *ngIf="!description.valid && description.touched">Please enter a valid description for the movie</span>
        </div>
THIS PART HERE
            <!-- <div class="form-group">
              <input type="url" class="form-control" id="movie-image" placeholder="Movie Poster" ngModel name="moviePoster" required #image="ngModel"
                [ngClass]="{isValid: moviePoster.valid && moviePoster.touched, isInvalid: !moviePoster.valid && moviePoster.touched}">
              <span class="help-block" *ngIf="!moviePoster.valid && moviePoster.touched">Please enter a valid url to image for the movie</span>
            </div> -->
THIS PART ENDS HERE
            <p class="help-block alert alert-info text-center">By submitting the data, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.
              Lorem ipsum dolor sit amet consectetur adipisicing elit. In deleniti nisi nobis atque repudiandae, commodi obcaecati
              accusantium asperiores dolorum incidunt sapiente neque magnam nulla maiores deserunt velit natus similique soluta?
            </p>
            <button type="submit" class="btn btn-default btn-block" [disabled]="!f.valid">Submit</button>
            <button type="button" class="btn btn-default btn-block" [disabled]="!f.dirty" (click)="reset()">Reset</button>
          </form>
        </div>
      </div>
    </section>

yurzui · Accepted Answer · 2017-10-03 14:19:51Z

2

There is no moviePoster control in your template

name="moviePoster" required #image="ngModel"

                            ^^^^^^^
               this is the name of your control

But you use

moviePoster.valid

where moviePoster is undefined

answered Oct 3, 2017 at 14:19

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Collectives™ on Stack Overflow

why after adding the input type `url` angular throws an error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related