Question

这是HTML文件。这里没有用过。此HTML中有两个按钮。使用angularJS2（打字稿）

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

在这里，我想验证强制 visitorName 字段，并添加类[ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}.。这应仅在首次点击按钮时验证。

但是，如果我将必需添加到 visitorName 字段，则会验证两次按钮点击。

如何解决此问题。

Answer 1

您可以在按钮上单击

设置所需的值

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

验证具有2个按钮的HTML中的输入字段。仅对单击一次按钮进行验证

1 个答案: