入力タイプ 'url`を追加した後に、エラーがスローされる

Question

コメント付きのパーツをビューに追加した後。アプリケーションが壊れて、次のエラーがスローされます。それはそのようなエラーを投げるべきではありません。なぜそのエラーを投げているのですか？しかし、要素を削除すると、すべての事が正常に戻ります。

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> 

全HTMLフォーム

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

Answer 1

あり、あなたのテンプレートにはmoviePoster制御

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

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

はありません。しかし、あなたはmoviePosterがある

moviePoster.valid 

を使用undefined