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

this doesn't work becuase you're not using reactive forms. You should re read angular's docs on forms, they have model driven forms and template driven forms, they're entirely separate. You're using template drivne forms on your inputs, but using model driven validation, which will not work. — bryan60
– bryan60, Commented Nov 22, 2017 at 13:50

user4676340 · Accepted Answer · 2017-11-22 13:33:09Z

2

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)

answered Nov 22, 2017 at 13:33

user4676340

Sign up to request clarification or add additional context in comments.

4 Comments

user4676340 Over a year ago

Because I told you, you need to use a reactiveForms to do that. Do you have a reactiveForms ?

moh Over a year ago

i used ` <div class="alert alert-danger" *ngIf="f.hasError('userName','required') && userName.touched ">name is required </div> ` but error will not show after leave input empety . . .

user4676340 Over a year ago

Well even with my answer adapted to your case, you managed to not use it correctly ... And that's why it doesn't work, you don't have a reactiveForms (= RF). You can't use RF properties if you don't have one ! This would be like driving a car that doesn't exist, it doesn't make sense :)

moh Over a year ago

how angular used that code in thier document . . . my mean in the document we have name.error.minlength for character length validation without reactive form

Collectives™ on Stack Overflow

angular 4 form validation for input errors

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related