angular 4 表单验证输入错误

Question

嗨 angular 开发人员...我有这样的表格...但是我的 ide 在这行代码显示错误 => *ngIf="userName.errors?.required && userName.touched

我什至尝试将 *ngIf="useName.errors.minlength 作为官方文档，但我仍然遇到该错误并且我的代码无法正常工作。 .您可以在这张图片中看到完整的 ide 错误。 .我该如何解决？

    <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>

你这是我的组件class

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 {
}

Answer 1

我使用（和工作）的语法是

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

在你的情况下，它将是

f.hasErrors('userEmail', ['required'])

但是你需要给你的表单一个 formControlName，因为现在，你没有创建 reactiveForms（或者你没有发布它）

angular 4 表单验证输入错误

angular 4 form validation for input errors

angular

angular4-forms

angular5