Button click validation in Angular2

Question

<form>
  <div class="ui-input-group">
    <input #model="ngModel" type="text" class="form-control" required placeholder="Name*" name="visitorName" [(ngModel)]="visitorName">
    <span class="input-bar"></span>
    <div  *ngIf="model.errors && (modeltitle.dirty || model.touched)"  style="color: red">
       Required
    </div>

   <button class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor()">
   <i class="fa fa-plus-circle"></i></button>
  </div>
</form>

Button click should be disabled if the input field is blank, How can I achieve that ?Currently validation message is not being displayed, what is wrong with the above code.

This like default validation message :

You should see Form validation: angular.io/guide/form-validation — Manh Le
– Manh Le, Commented Jul 24, 2017 at 6:35

Radouane ROUFID · Accepted Answer · 2017-07-24 06:38:05Z

1

<form #myForm="ngForm">
    <div class="ui-input-group">
        <input #model="ngModel" type="text" class="form-control" required placeholder="Name*"
               name="visitorName" [(ngModel)]="visitorName">
        <span class="input-bar"></span>
        <div *ngIf="model.errors && (modeltitle.dirty || model.touched)" style="color: red">Required
        </div>
    </div>

    <button class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor()"
            [disabled]="!myForm.form.valid">
        <i class="fa fa-plus-circle"></i></button>
</form>

answered Jul 24, 2017 at 6:38

Radouane ROUFID

10.9k9 gold badges47 silver badges83 bronze badges

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

2 Comments

user630209 Over a year ago

Can I use default form validation , instead of this message ? <div *ngIf="model.errors && (modeltitle.dirty || model.touched)" style="color: red">Required</div>

AVJT82 Over a year ago

@user630209 what do you mean with default form validation?

brijmcq · Accepted Answer · 2017-07-25 04:02:24Z

0

You can do something like this

<form #f="ngForm">
    <div class="ui-input-group">
        <input #model="ngModel" 
                type="text" class="form-control" placeholder="Name*"
               name="visitorName" [(ngModel)]="visitorName">
        <span class="input-bar"></span>
        <div *ngIf="model.errors && (modeltitle.dirty || model.touched)" 
         style="color: red">Required
        </div>
    </div>
    <button class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor()" 
    [disabled]="!f.valid"> <i class="fa fa-plus-circle"></i></button>
</form>

If you don't want the message Please fill out this field, remove the require attribute in your input and add novalidate in your form like this

<form novalidate #f="ngForm"> ...

answered Jul 25, 2017 at 4:02

brijmcq

3,4182 gold badges19 silver badges34 bronze badges

2 Comments

Yoav Schniederman Over a year ago

Why to use ngModel inside form. You need to use formControl.

brijmcq Over a year ago

@YoavSchniederman the code provided is using template-driven forms that's why. If it is reactive-form, formControl should have been used

AVJT82 · Accepted Answer · 2017-07-26 12:27:21Z

0

Sounds like you want native validation. As of Angular 4, novalidate is set by default. So now you have to explicitly tell Angular to provide it. We can do that with

ngNativeValidate

in the form tag.

Furthermore, you also have to make some changes to your form. You need to make the button of type submit, otherwise when you click submit when form is not valid, the method addVisitor() will be fired anyway. But if your button is of type="submit" the method will not be fired. This also means, that you should set (ngSubmit)="addVisitor()" in the form tag. So change your form to this:

<form #myForm="ngForm" ngNativeValidate (ngSubmit)="addVisitor()">
  <div class="ui-input-group">
    <input #model="ngModel" type="text" class="form-control" required 
           placeholder="Name*" name="visitorName" [(ngModel)]="visitorName">
  </div>
  <button type="submit">Submit</button>
</form>

answered Jul 26, 2017 at 12:27

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

1 Comment

Shashi Ranjan Over a year ago

How I can call ngNativeValidate validator function without submit. I mean with different button?

Collectives™ on Stack Overflow

Button click validation in Angular2

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related