輸入錯誤的角度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 （或者您沒有發布它）。