Validate form on button click in angular

Question

As I am new in angular 4.0 and I am stuck at the validation I am having a form which consists two fields here is the form

<form action="my-account.html" method="post" class="form-horizontal">
            <div class="form-group">
                <label for="exampleInputEmail1" class="col-sm-3">User name</label>
                <div class="col-sm-9">
                <input type="email" class="form-control" id="exampleInputEmail1"  placeholder="Username" required>

                </div>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1" class="col-sm-3">Password</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="exampleInputPassword1"  placeholder="Password" required>

                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9 ">
                    <button type="submit" class="btn btn-primary btn-sm"  [routerLink]="['/dashboard']">Submit</button>
                    <button type="submit" class="btn btn-primary btn-sm">I Forgot My Password</button>
                </div>
            </div>
        </form>

I want to do validation on a submit button

**<button type="submit" class="btn btn-primary btn-sm"  [routerLink]="['/dashboard']">Submit</button>**

In the simplest way so how can I do it?

Might help: angular.io/guide/form-validation

Shashidhar Mayannavar
– Shashidhar Mayannavar

2018-03-14 07:36:22 +00:00
Commented Mar 14, 2018 at 7:36 — Shashidhar Mayannavar
– Shashidhar Mayannavar, Commented Mar 14, 2018 at 7:36

Santosh Singh · Accepted Answer · 2018-03-14 07:46:19Z

1

Use this link and go through explains the whole scenario for validation

https://www.toptal.com/angular-js/angular-4-forms-validation

<form (ngSubmit)="onSubmit(loginForm)" [formGroup]="loginForm" novalidate class="form-horizontal">
  <div class="form-group">
      <label for="exampleInputEmail1" class="col-sm-3">User name</label>
      <div class="col-sm-9">
      <input type="email" formControlName="username" class="form-control" id="exampleInputEmail1"  placeholder="Username" required>
     <!-- put your validations here -->
      </div>
  </div>
  <div class="form-group">
      <label for="exampleInputPassword1" class="col-sm-3">Password</label>
      <div class="col-sm-9">
          <input type="password" formControlName="password" class="form-control" id="exampleInputPassword1"  placeholder="Password" required>
        <!-- put your validations here -->
      </div>
  </div>

  <div class="form-group">
      <div class="col-sm-offset-3 col-sm-9 ">
          <button type="submit" class="btn btn-primary btn-sm"  [disabled]="loginForm.$invalid">Submit</button>
          <button type="submit" class="btn btn-primary btn-sm">I Forgot My Password</button>
      </div>
  </div>
</form>

//and in you .ts file

 constructor(private fb: FormBuilder){}

ngOnInit() {
    this.profile = this.fb.group({
      userName: [null, [Validators.required]],
      password: [null, [Validators.required]]
    })
};

edited Mar 14, 2018 at 7:46

answered Mar 14, 2018 at 7:38

Santosh Singh

5792 silver badges16 bronze badges

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

7 Comments

Santosh Singh Over a year ago

loginForm: FormGroup; in the beginning and replace this.profile with this.loginForm

Gaurav_0093 Over a year ago

when i am trying to apply [formgroup] tag in form control then it is showing error like template parsing error

Santosh Singh Over a year ago

you have to include formsModule in app.module.ts

Santosh Singh Over a year ago

also go through the above link i have mentioned it carries all information step by step.

Santosh Singh Over a year ago

even if you stuck somewhere please post

|

Collectives™ on Stack Overflow

Validate form on button click in angular

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related