Angular2 Form Validation with regular expression

Question

Is there a good way to bind a regular expression to an input field and only if the expressions is matched, the submit button can be clicked?

Im looking for an smooth system like the ngModel 2-way-binding or does it requiere alot work?

Below an code example, with my regular expression, but it doesnt work like i wish too

<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_.\-]+">

EDIT:

Some more Code to look at

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>

@AJT_82 if the input is not Valid it shows the .css, but i still cant hit the submit button. — sHamann
– sHamann, Commented Aug 3, 2017 at 7:00
Well from my understanding you don't want the button to be clickable unless the field is valid? This I gather from this line: "and only if the expressions is matched, the submit button can be clicked" So what is that you really want? :) — AVJT82
– AVJT82, Commented Aug 3, 2017 at 7:04
@AJT_82 you just wrote what i want to achieve, at the moment i can give the input field an string and it will be checked an this works as it should, but im not able to link this to the submit button. Basiclly i need something like an if on the submit button but i dont know how to get the valid true or false from the pattern check — sHamann
– sHamann, Commented Aug 3, 2017 at 7:09
voucherCode.errors?.pattern is that what you are looking for? — AVJT82
– AVJT82, Commented Aug 3, 2017 at 7:15

JGFMK · Accepted Answer · 2017-08-02 17:45:17Z

1

It's in the docs here:

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

And they talk about Regular Expressions later here. It involves creating a directive that you can use to do the kind of thing you asked for.

edited Aug 2, 2017 at 17:45

answered Aug 2, 2017 at 17:35

JGFMK

8,9974 gold badges65 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Form Validation with regular expression

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related