正則表達式的Angular2表單驗證

是否有一種將正則表達式綁定到輸入字段的好方法，只有當表達式匹配時，才能點擊提交按鈕？正則表達式的Angular2表單驗證

我正在尋找一個像ngModel 2-way綁定一樣的流暢系統，還是需要很多工作？

下面的代碼示例，用我的正則表達式，但它不工作，就像我希望過

<span class="input-group-addon">Code</span> 
<input type="text" class="form-control" id="voucherCode" [(ngModel)]="tempPromotion['response_payload']['promotionCode']" 
    name="voucherCode" pattern="[A-Za-z0-9_.\-]+">

編輯：

更多的代碼來看看

tempPromotion

{ 
    "status": { 
     "statusCode": "0", 
     "statusMessage": "OK" 
    }, 
    "response_payload": { 
     "id": "1", 
     "promotionCode": "A1239.ESR_ESW", 
     "active": true, 
     "ruleset_list": [{ 
      "id": "83", 
      "condition": "saleschannel.totalamount > `15` && current_datetime < `2017-08-30T15:50.01`", 
      "results": [{ 
        "id": "110", 
        "value_path": "saleschannel.totalamount", 
        "expression": "mul(#VALUE, 0.9)", 
        "valid": false 
       }, 
       { 
        "id": "186", 
        "value_path": "saleschannel.totalamount", 
        "expression": "sendTeaser(\"{\"a\": 1}\")", 
        "valid": false 
       } 
      ], 
      "active": true 
     }], 
     "saleschannel_list": [{ 
       "id": "2", 
       "name": "A", 
       "trackingId": "3", 
       "public": false 
      }, 
      { 
       "id": "3", 
       "name": "B", 
       "public": true 
      } 
     ] 
    } 
}

voucher.html

<div id="top" *ngIf="tempPromotion" class="voucher-edit"> 
    <form onsubmit="" #VoucherForm="ngForm"> 


    <div class="input-group"> <!-- Always one input Field --> 
      <span class="input-group-addon">Code</span> 
      <input type="text" class="form-control" id="voucherCode" [(ngModel)]="tempPromotion['response_payload']['promotionCode']" name="voucherCode"> 
      <span class="input-group-addon"><i class="fa fa-hashtag"></i></span> 
    </div> 

    <div class="card" *ngFor="let rule of tempPromotion['response_payload']['ruleset_list']; let i = index"> <!-- NGFOR --> 
     <strong style="margin-left: 5px">Regelwerk</strong> 
     <small>{{rule['id']}}</small> 

    <div class="input-group"> <!-- Atleast one field, can be infinit --> 
     <span class="input-group-addon">Bedingung</span> 
     <input type="text" class="form-control" id="rule{{i}}" [(ngModel)]="rule['condition']" name="rule{{i}}"> 
    </div> 


    <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>Pfad</th> 
       <th>Ergebnis</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="let result of rule['results']; let x = index"> <!-- NGFOR --> 
       <td>{{result['id']}}</td> 
       <td><input type="text" class="form-control" id="valuePath{{i}}{{x}}" [(ngModel)]="result['value_path']" name="valuePath{{i}}{{x}}"></td> <!-- Atleast one field, can be infinit --> 
       <td><input type="text" class="form-control" id="discount{{i}}{{x}}" [(ngModel)]="result['expression']" name="discount{{i}}{{x}}"></td> <!-- Atleast one field, can be infinit --> 
      </tr> 
     </tbody> 
    </table> 


    <button type="submit" class="btn btn-md btn-success" (click)="EditVar = 0; ; voucherService.putVoucher(addOverride(this.tempPromotion['response_payload']));"><i class="fa fa-check"></i> Speichern</button> 
    <button type="reset" class="btn btn-md btn-warning" (click)="EditVar = 0; resetData();"><i class="fa fa-undo"></i> Zurücksetzten</button> 

    </form> 
</div>

來源

2017-08-02 sHamann

**它不工作，我希望太**意味着什麼？ – Alex

@ AJT_82如果輸入不是有效的，它顯示.css，但我仍然無法擊中提交按鈕。 – sHamann

那麼從我的理解你不希望按鈕是可點擊的，除非該字段是有效的？我從這行收集：*「並且只有當表達式匹配時，才能點擊提交按鈕」*那麼你真正想要的是什麼？ :) – Alex

它在文檔here：

<form #heroForm="ngForm" *ngIf="active" (ngSubmit)="onSubmit()"> 
<button type="submit" class="btn btn-default" 
      [disabled]="!heroForm.form.valid">Submit</button> 
</form>

和他們談正則表達式後here。它涉及到創建一個指令，你可以用它來做你要求的事情。

來源

2017-08-02 17:35:23 JGFMK

正則表達式的Angular2表單驗證

回答

相關問題