CODEWITHSUNDEEP
angularjstypescript
Rosh
Rosh

Reputation: 1736

Validate an input field in HTML having 2 buttons. Validate only for one button click

This is the HTML file. There is no used in this. There are two buttons in this HTML. Using angularJS2( typescript )

<div class="visitor-entry form-group">
    <!-- [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}"-->
    <div class="ui-input-group">
        <input #vName="ngModel" type="text" class="form-control" placeholder="Name*" name="visitorName" [(ngModel)]="visitorName">
        <span class="input-bar"></span>
    </div>
    <div class="ui-input-group">
        <input type="text" class="form-control" placeholder="Mobile" name="visitorMob" [(ngModel)]="visitorMob">
        <span class="input-bar"></span>
    </div>
    <div class="add-btn-cont">
        <button [disabled]="vName.errors" class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor();"></button>
    </div>
</div>

<div class="block search-add-list active">
    <h6>Person Affected
          <button class="icon-btn pull-right addNewBtn" title="Add New" data-toggle="modal" id="personAffectedBtn" (click)="addNewPerson(personAffectedCode)></button>
        </h6>
</div>

Here I want to validate the visitorName field mandatory, and add the class [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}. . THis should be validated only for first button click.

But if I add required to visitorName field then it is validating for both the button clicks.

How can I solve this issue.

Upvotes: 1

Views: 96

Answers (1)

Vivz
Vivz

Reputation: 6630

You can set the value of required on button click

<div class="visitor-entry form-group" >
  <!-- [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}"-->
  <div class="ui-input-group"  >
    <input #vName="ngModel" type="text"  class="form-control" placeholder="Name*" name="visitorName" [(ngModel)]="visitorName" [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}" [required]="{{reqVal}}">
    <span class="input-bar"></span>
  </div>
  <div class="ui-input-group">
    <input type="text" class="form-control" placeholder="Mobile" name="visitorMob" [(ngModel)]="visitorMob">
    <span class="input-bar"></span>
  </div>
  <div class="add-btn-cont">
    <button  [disabled]="vName.errors" class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor();reqVal=false"></button>
  </div>
</div>

<div class="block search-add-list active">
    <h6>Person Affected
      <button class="icon-btn pull-right addNewBtn" title="Add New" data-toggle="modal" id="personAffectedBtn" (click)="addNewPerson(personAffectedCode);reqVal=true"></button>
    </h6>
</div>

Upvotes: 1

Related Questions