在段落中显示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})$';
    ...
}