输入错误的角度4形式验证

时间:2017-11-22 13:14:58

标签: angular angular4-forms angular5

你好角度开发者...我有一个这样的形式...但我的ide在这行代码中显示错误=> *ngIf="userName.errors?.required && userName.touched

我甚至尝试*ngIf="useName.errors.minlength作为官方文档,但我仍然有错误,我的代码无效。 。你可以在这张照片中看到完整的ide错误。 。我该怎么办?

enter image description here

    <form class="form-group" novalidate #f="ngForm" >
        <div>
            <label>name</label>
            <input
                    type="text"
                    class="form-control"
                    [(ngModel)]="user.name"
                    name="name"
                    #userName="ngModel"
                    minlength="2"
                    required
            >
            <div class="alert alert-danger" *ngIf="userName.errors?.required && userName.touched ">name is required

            </div>

        </div>
        <div>
            <label>email</label>
            <input
                    type="email"
                    class="form-control"
                    [(ngModel)]="user.email"
                    name="email"
                    #userEmail="ngModel"
                    required
            >
            <div class="alert alert-danger" *ngIf="userEmail.errors && (userEmail.touched || userEmail.dirty)">
                email is required
            </div>
        </div>
        <div>
            <label>phone</label>
            <input
                    type="text"
                    class="form-control"
                    [(ngModel)]="user.phone"
                    name="phone"
                    #userName="ngModel"
                    minlength="10"
            >
        </div>
        <div>
            <button type="submit" class="btn btn-success">ok</button>
        </div>
    </form>

你这是我的组件类

export class SandboxComponent {


    user = {
        name: '',
        email: '',
        phone: ''
    }}

这是我的app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { FormsModule } from '@angular/forms'


import {AppComponent} from './app.component';
import {SandboxComponent} from './components/sandbox/sandbox.component';

@NgModule({
    declarations: [
        AppComponent,
        SandboxComponent
    ],
    imports: [
        BrowserModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

1 个答案:

答案 0 :(得分:2)

我使用(和工作)的语法是

Typeface ft=textview.getTypeface();
textview.setTypeface(ft, Typeface.BOLD);

在你的情况下,它将是

form.hasErrors('field', ['errors'])

但是你需要给你的表单f.hasErrors('userEmail', ['required']) ,因为现在,你没有创建一个反应形式(或者你没有发布它)