Angular中[hidden] =“ arr [0],arr [1],arr [2] == var”内的条件

时间:2018-08-08 04:54:06

标签: angular

我正在尝试进行确认。第一件事是绑定到[(ngModel)]的数组形式的用户输入,以便我可以将其进一步用于确认验证,即第一输入是[[ngModel )] =“ pin [0]”,第二个输入[(ngModel)]="pin[1]"和第三个输入是[(ngModel)]="pin[2]"

代码:

<input type="text" pattern="^([0][1-9]|[1-2][0-9]|[3][0-5])+$" id="1" style="width: 38px;" [(ngModel)]="pin[0]" maxlength="2" autocomplete="off" (keyup)="next(pin[0], 2, 1)" #zero name="GST_0" preventCutCopyPaste>
    -&nbsp;-
<input type="text" id="2" maxlength="10" pattern="([a-zA-Z]{5}[0-9]{4}[a-zA-Z]{1})" style="width: 110px;" [(ngModel)]="pin[1]" autocomplete="off" [disabled]="!pin[0]" (keyup)="next(pin[1], 10, 2)" #one name="GST_1" preventCutCopyPaste>
    -&nbsp;-
<input type="text" id="3" [(ngModel)]="pin[2]" pattern="^(1-9a-zA-Z]{1}[a-zA-Z]{1}[0-9a-zA-Z]{1})" maxlength="3" style="width: 45px;" autocomplete="off" [disabled]="!pin[1]" (keyup)="next(pin[2], 2, 3)" #two name="GST_2" preventCutCopyPaste> 
    &nbsp;
<input type="text" id="form1"  [(ngModel)]="GST_number2"  maxlength="15" class="form-control"  name="GST_number2"  #confirmgst="ngModel" ngModel required preventCutCopyPaste>

<label> Confirm GST Number </label>
<div *ngIf="confirmgst.touched" style="color:red"  [hidden]="GST_number2 == pin[0],pin[1],pin[2],"> 
    GST number do not match!
</div>

2 个答案:

答案 0 :(得分:0)

尝试这样:

DEMO

<input type="text" pattern="^([0][1-9]|[1-2][0-9]|[3][0-5])+$" id="1" style="width: 38px;" [(ngModel)]="pin[0]" maxlength="2"
 autocomplete="off" (keyup)="next(pin[0], 2, 1)" #zero name="GST_0" preventCutCopyPaste>-&nbsp;-

<input type="text" id="2" maxlength="10" pattern="([a-zA-Z]{5}[0-9]{4}[a-zA-Z]{1})" style="width: 110px;" [(ngModel)]="pin[1]"
 autocomplete="off" [disabled]="!pin[0]" (keyup)="next(pin[1], 10, 2)" #one name="GST_1" preventCutCopyPaste>-&nbsp;-

<input type="text" id="3" [(ngModel)]="pin[2]" pattern="^(1-9a-zA-Z]{1}[a-zA-Z]{1}[0-9a-zA-Z]{1})" maxlength="3" style="width: 45px;"
 autocomplete="off" [disabled]="!pin[1]" (keyup)="next(pin[2], 2, 3)" #two name="GST_2" preventCutCopyPaste> &nbsp;



<input type="text" placeholder="GST_2" id="form1" [(ngModel)]="GST_number2" maxlength="15" class="form-control" name="GST_number2"
 #confirmgst="ngModel" ngModel required preventCutCopyPaste>


<label> Confirm GST Number  </label>


<div *ngIf="confirmgst.touched" style="color:red" [hidden]="GST_number2== pin[0]+pin[1]+pin[2]
 "> GST number do not match!</div>

答案 1 :(得分:0)

尝试使用此条件GST_number2 == pin[0]+pin[1]+pin[2]

<div *ngIf="confirmgst.touched" style="color:red" [hidden]="GST_number2 == pin[0]+pin[1]+pin[2]"> 
   GST number do not match!
</div>