typescript - varför ger Angular ett fel efter att ha lagt till inputtypen `url`

Efter att ha lagt till den kommenterade delen i vyn. Appen kraschar och ger följande fel. Den borde inte ge ett sådant fel. Varför ger den det felet? Men när jag tar bort elementet, återgår allt till det normala.

  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>

Fullständig HTML-formulär

<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>

Svar #1

Det finns ingen moviePoster-kontroll i din mall

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

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

Men du använder

moviePoster.valid

där moviePoster är undefined