角度验证 未定义错误

Question

我正在尝试使用模板驱动的表单，但我似乎无法根据教程正确工作 errors 属性来验证最小长度 此处. 我在开发工具中加载页面时遇到的错误是：

联系人窗体组件.html：8 错误类型错误： 无法读取属性 空的"最小长度">

所以问题是ngModel上没有.error属性。 我不确定我是否误解了某些内容或错误地设置了表单。 如果没有验证，一切都按预期工作。

.HTML

<form (ngSubmit)="onSubmit()" #contactForm="ngForm">
<div class="form-group">
<label for="email">Email</label>
<input minlength="6" maxlength="50" name="email" class="form-control" id="email" placeholder="Email" required email [(ngModel)]="contactForm.email" #email="ngModel">
<div *ngIf="email.dirty || email.touched" class="alert alert-danger">
<div [hidden]="!email.errors.minlength">
<span>Email is too short</span>
</div>
</div>
</div>
</form>

元件

import { Component, Input } from '@angular/core';
import { Contact } from './contact';
import { AppService } from '../app.service';
@Component({
selector: 'selected-page',
template: require('./contact-form.html'),
providers: [AppService]
})
export class ContactFormComponent {
contactForm = new Contact();
submitted: boolean = false;
constructor (private appService: AppService) {}
onSubmit() {
this.appService.emailContact(contactForm).then(data => {
this.submitted = true;
});
}
}

模块

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes }   from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';
import { ContactFormComponent } from './contact/contact-form.component';
import { HttpModule } from '@angular/http';
import { AppService } from './app.service';
const appRoutes: Routes = [
{
path: 'contact',
component: ContactFormComponent
}
]
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule,
HttpModule
],
declarations: [ 
AppComponent,
ContactFormComponent,
],
bootstrap: [ AppComponent ],
providers: [ AppService ]
})
export class AppModule { }

Answer 1

问题是我在代码中错误地使用了*ngIf，并对它的工作原理做出了假设。 我更新了我的原始帖子以正确反映这一点。

email.errors上的*ngIf会阻止计算子 html 元素，从而阻止错误发生。

根据虚幻评论，您也不能通过执行!email.errors?.minlength来一起使用*ngIf。

我有什么

<div *ngIf="email.dirty || email.touched" class="alert alert-danger">
<div [hidden]="!email.errors.minlength">
<span>Email is too short</span>
</div>
</div>

正确答案

<div *ngIf="email.errors && (email.dirty || email.touched)" class="alert alert-danger">
<div [hidden]="!email.errors.minlength">
<span>Email is too short</span>
</div>
</div>