角度验证 .error 未定义答案

【问题标题】：angular validation .error not defined角度验证 .error 未定义
【发布时间】：2017-07-08 18:16:42
【问题描述】：

我正在尝试使用模板驱动的表单，但我似乎无法按照教程Here 正确地验证 minlength 属性。我在开发工具中加载页面时遇到的错误是：

ContactFormComponent.html:8 错误类型错误：无法读取属性 'minlength' 为 null

所以问题是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 { }

【问题讨论】：

你为什么不直接<div [hidden]="!email.errors?.minlength">？
@TheUnreal 是的，谢谢。让我在正确的轨道上缩小我在代码的另一部分中错误地使用 *ngIf 的范围。谢谢。

标签： javascript html angular validation

【解决方案1】：

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

email.errors 上的 *ngIf 阻止子 html 元素被评估，从而阻止错误发生。

根据 TheUnreals 的评论，您也不能通过 !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>

【讨论】：