Question

有没有一种方法可以将正则表达式绑定到输入字段，只有表达式匹配时才能点击提交按钮？

我正在寻找像ngModel 2-way-binding这样的流畅系统，还是需要大量的工作？

在代码示例下面，使用我的正则表达式，但它也不像我希望的那样工作

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

Answer 1

它位于文档here中：

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

他们后来谈论正则表达here。它涉及创建一个指令，您可以使用它来执行您要求的事情。

Angular2表单验证与正则表达式

1 个答案: