On Button Click Validate a template form in Angular 2

Question

I am new to Angular 2.

I have created a simple template which has two text field, I want to required field validate those two fields.

Login Form

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)" novalidate>
    <div class="container">
        <div class="form-group">
            ooooo   <label><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="uname" required [(ngModel)]="UserData.uname" #uname="ngModel">

            <div *ngIf="loginForm.invalid"  class="alert alert-danger">
                <div [hidden]="!uname.errors.required"> Name is required </div>
            </div>
        </div>
        <div class="form-group">
            <label><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="pwd" required [(ngModel)]="UserData.pwd" #pwd="ngModel">
            <div *ngIf="UserData.pwd.errors && (UserData.pwd.dirty || UserData.pwd.touched)" class="alert alert-danger">
                <div [hidden]="!UserData.pwd.errors.required">Password is required </div>
            </div>
            <button type="submit"  >Login</button>
        </div>
    </div>
</form>

My Component

import { Component } from "@angular/core"
import { User } from "./UserModel"


@Component({
    selector: 'my-login',
    templateUrl:"app/Login/login.html"
})

export class LoginComponent
{
    //alert: any("hello");
    UserData: User = new User("", "");

    submitted = false;

    onSubmit(form: any) {
        alert("dfsdfsd" + form);
        if (!form.invalid) {
            alert(this.UserData.uname);
            alert(this.UserData.pwd);
            this.submitted = true;
        }
    }

}

What i want to implement is-

When the form loads no validation message should appear?
When user clicks on the submit button then the required message should appear?
In both the textbox i have applied different type of checks to show the message that is inconsistent? so there should be a consistent way to solve this.

Many thanks for the help.

AVJT82 · Accepted Answer · 2017-06-12 20:41:07Z

0

Maybe make use of the submitted variable, and use that in template, to not show message, until submitted is true, which we set it as in the submit function.

Also you wouldn't really need the two-way-binding here, since the object your form produces is directly assignable to your UserData.

The validation messages I'd just set then simply like this, where we are targeting the username:

<div *ngIf="uname.errors?.required && submitted"> Name is required </div>

in your submit function I'd pass loginForm.value as parameter instead of just loginForm. This way you get the form object ready to be used :)

And in your function you can assign the object to your UserData variable.

onSubmit(form: any) {
  this.submitted = true;
  this.UserData = form;
}

If you do want to keep the two-way-binding, it's of course totally possible! :)

DEMO

answered Jun 12, 2017 at 20:41

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Collectives™ on Stack Overflow

On Button Click Validate a template form in Angular 2

Login Form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Login Form

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related