CODEWITHSUNDEEP
angular
user630209
user630209

Reputation: 1207

Button click validation in Angular2

<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 : enter image description here

Upvotes: 1

Views: 3725

Answers (3)

AVJT82
AVJT82

Reputation: 73367

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>

Upvotes: 0

brijmcq
brijmcq

Reputation: 3418

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

Upvotes: 0

Radouane ROUFID
Radouane ROUFID

Reputation: 10833

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

Upvotes: 1

Related Questions