錯誤類型錯誤：無法讀取 null 的屬性“電子郵件”

Question

我正在為電子郵件編寫表單驗證，因此它給出了以下錯誤 - 錯誤類型錯誤：無法讀取 null 的屬性“電子郵件”。 以下是 Angular 5 模板驅動表單的 HTML 代碼。

 <form name="form" #myForm="ngForm" (ngSubmit) = "onSubmit()"> <div class="form-group"> <label for="firstName">First Name*</label> <input type="text" class="form-control" name="firstName" [(ngModel)]="firstName" #firstname="ngModel" required minlength="6" /> <div *ngIf="firstname.touched && firstname.invalid"> <div *ngIf="firstname.invalid && firstname.errors.required" class="alert alert-danger">First name is mandatory</div> <div *ngIf="firstname.invalid && firstname.errors.minlength" class="alert alert-danger">First name must have minimum 6 characters</div> </div> <div *ngIf="myForm.submitted && firstname.invalid"> <div *ngIf="firstname.invalid && firstname.errors.required">First name is mandatory</div> </div> </div> <div class="form-group"> <label for="lastName">Last Name</label> <input type="text" class="form-control" name="lastName" [(ngModel)]="lastName" #lastname="ngModel" required /> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" name="myemail" [(ngModel)]="email" #myemail="ngModel" required myemail/> <div *ngIf="myemail.touched"> <div *ngIf="myemail.invalid && myemail.errors?.required" class="alert alert-danger">Email is required</div> <div *ngIf="myemail.errors.email && !myemail.errors.required" class="alert alert-danger">Email is not valid</div> </div> </div> <div class="form-group"> <label for="selectcity">City</label> <select name="city" class="form-control" [(ngModel)] = "cityvalue" required #cityselect = "ngModel"> <option value="Pune">Pune</option> <option value="Mumbai">Mumbai</option> <option value="Delhi">Delhi</option> <option value="Surat">Surat</option> </select> <div *ngIf="cityselect.touched && cityselect.invalid"> <div *ngIf="cityselect.invalid && cityselect.errors.required" class="alert alert-danger">City name is mandatory</div> </div> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" name="password" [(ngModel)]="password" #mypassword="ngModel" minlength="6"/> </div> <div class="form-group"> <button class="btn btn-primary">Register</button> </div> </form>

以下是電子郵件驗證的代碼

 <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" name="myemail" [(ngModel)]="email" #myemail="ngModel" required myemail/> <div *ngIf="myemail.touched"> <div *ngIf="myemail.invalid && myemail.errors?.required" class="alert alert-danger">Email is required</div> <div *ngIf="myemail.errors.email && !myemail.errors.required" class="alert alert-danger">Email is not valid</div> </div> </div>

如果我使用“myemail.errors?.email”它工作正常但不顯示消息“電子郵件無效”。 如果我使用“myemail.errors.email”，它會拋出上面或標題中顯示的錯誤。

我嘗試使用模式 "pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[az]{2,4}$" " 它適用於電子郵件.

以下是我的問題：為什么在模板驅動的角度電子郵件形式中會拋出空錯誤？ 我們如何解決它。

Answer 1

應該改為

<input type="email" class="form-control" name="myemail" [(ngModel)]="myemail" 
#myemail="ngModel" required />