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

为什么在添加输入类型`url` angular后会抛出错误

1 个答案: