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

Question

嗨，角度开发人员...我有这样的形式...但是我的*ngIf="userName.errors?.required && userName.touched在这行代码中显示错误=> *ngIf="userName.errors?.required && userName.touched

我什至尝试过*ngIf="useName.errors.minlength作为正式文档，但是我仍然*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>

你这是我的组件类

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 ，因为现在您没有创建formControlName （或者您没有发布它）。