为什么在添加输入类型 `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.valid

其中moviePoster 是undefined