regex - パターンを使用した Angular2 フォームの検証

Question

Angular 4.3.0 で電子メールのパターン属性を使用しようとしていますが、電子メールが正しい場合でもfield.errors.patternは true を返します。私は既存のコードに取り組んでおり、このパターンはこれで使用されていました。正規表現も理解できません。

以下はHTMLフォームです

<form #loginform="ngForm" class="form-horizontal  b bg-white padding_default r-2x box-shadow" novalidate role="form">

    <div class="text-danger wrapper text-center" *ngIf="authError">

    </div>
    <div class="animated fadeIn">
        <div class=" m-b-md no-border ">
            <input id="username" type="email" class="form-control input-lg b  text-md" name="username" placeholder="Email" [(ngModel)]="loginData.email"
                autofocus required #username="ngModel" pattern="emailPattern">
            <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
                <div *ngIf="username.errors.required">
                    Name is required.
                </div>
                <div *ngIf="username.errors.pattern">
                    Name is invalid
                </div>

            </div>
            <!--<div class="sxo_validate_msg text-danger text-sm" *ngIf="username.touched && isValidEmail">
                            <span>Invalid email address.</span>
                        </div>-->
        </div>

        <div class=" m-b-md no-border">
            <input id="password" type="password" class="form-control input-lg b b-light text-md" name="password" [(ngModel)]="loginData.password"
                placeholder="Password" required #password="ngModel">
            <div class="text-danger sxo_validate_msg text-sm" *ngIf="password.dirty && password.invalid">
                <span *ngIf="password.required">Password is required.</span>
            </div>
        </div>

        <div class="m-b-md m-t-md">
            <label class="i-checks text-sm">
                <input name="rememberme" id="login-remember" type="checkbox" [(ngModel)]="loginData.rememberMe"><i></i> <a href="#">Remember me</a>
            </label>
        </div>

        <div class="controls m-t-md">

            <div class="m-b-lg" *ngIf="showCaptche">
                <re-captcha [site_key]="model.key" (captchaResponse)="setResponse($event)"></re-captcha>

                <!--<div vc-recaptcha
                                theme="'light'"
                                key="model.key"
                                on-create="setWidgetId(widgetId)"
                                on-success="setResponse(response)"
                                on-expire="cbExpiration()"></div>-->
            </div>
            <input class="btn btn-lg btn-dark btn-block" value="Login" (click)="login()" [disabled]="!loginform.form.valid" />
            <div [hidden]="!message" class="alert alert-danger sxo_validate_msg p-t-xs p-b-xs">
                {{message}}
            </div>
        </div>
    </div>


</form>

以下はパターンです

emailPattern:any =  new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);