在段落中顯示Angular 4電子郵件驗證文本

Question

我正在使用內置的Angular 4電子郵件輸入驗證器。 它可以工作，但是我只能在小彈出窗口中看到信息。 是否可以在輸入下方的段落中顯示它？

我的輸入代碼：

<input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email" [(ngModel)]="eMail" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>

謝謝！

Answer 1

你可以這樣做 ：

在您的HTML中：

    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" formControlName="email" required>
        <div [hidden]="!(myForm.controls.email?.dirty && myForm.controls.email?.invalid)">
            <small class="form-text text-danger"
 [hidden]="!myForm.controls.email?.errors?.required">This field is required</small>
            <small class="form-text text-danger"
 [hidden]="!myForm.controls.email?.errors?.pattern">Wrong format error message</small>
        </div>
    </div>

並在您的app.component.ts文件中：

this.myForm = fb.group({
    ...
    email: new FormControl('', Validators.pattern(Regex.EMAIL))
});

對於您的模式：

export class Regex {
    public static EMAIL = '^[a-z0-9]+(\\.[_a-z0-9]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,15})$';
    ...
}