angular 4 form validation for input errors

Question

hi angular developers ... i have a form like this ... but my ide show error at this line of code => *ngIf="userName.errors?.required && userName.touched

i even tried *ngIf="useName.errors.minlength as official document but i still have that error and my codes is not working . . you can see full ide error in this picture . . how should i fix that ?

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

you this is my component class

export class SandboxComponent {


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

and here is my 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

The syntax I use (and works) is

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

In your case, it would be

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

But you need to give your forms a formControlName , because right now, you're not creating a reactiveForms (or you're not posting it)