3
주석 처리 된 부분을보기에 추가 한 이유는 무엇입니까? 앱이 중단되어 다음 오류가 발생합니다. 그것은 그러한 오류를 throw해서는 안됩니다. 왜 그 오류를 던지고있다. 하지만 요소를 제거하면 모든 것이 정상으로 돌아갑니다.입력 유형`url`을 추가 한 후 오류가 발생했습니다.
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>