1

我对 Angular 完全陌生，我知道我不是第一个提出这个问题的人，我正在使用 Angular 5 应用程序，在此我需要验证用户邮件，如果它是有效邮件，我在该按钮中有一个按钮单击我需要导航到新组件。

这里模式验证正在工作，但如果我触摸了电子邮件框但没有输入任何值，我想显示“需要电子邮件”，但它对我不起作用。

另一件事是我想让“按钮”只有在输入有效电子邮件后才能点击。

<div class="col-12">
    <form>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="email" name="email" ngModel
                #emailref="ngModel">
            <div *ngIf="emailref.errors &&(emailref.touched || emailref.dirty)" class="aler alert-danger">
                <div [hidden]="!emailref.errors?.pattern">
                    Invalid pattern
                </div>
                <div [hidden]="!emailref.errors?.emailref.touched">
                    Invalid pattern
                </div>
            </div>

            <br>
            <button type="submit" routerLink="/createaccount" class="btn btn-primary">
                <i class="fas fa-user text-dark" style="font-size:20px"></i>
                Create An Account
            </button>
        </div>
    </form>
</div>

谁能帮我解决这个问题。

4

3 回答 3

0

这是您的 HTML 标记中的更改

<div class="col-12">
<form #myForm="ngForm">
    <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="email" name="email" ngModel
            #emailref="ngModel" required>
        <div *ngIf="emailref.errors &&(emailref.touched || emailref.dirty)" class="aler alert-danger">
            <div [hidden]="!emailref.errors?.pattern">
                Invalid pattern
            </div>
            <div [hidden]="!emailref.errors?.emailref.touched">
                Email is required
            </div>
        </div>

        <br>
        <button type="submit" routerLink="/createaccount" class="btn btn-primary" [disabled]="myForm.invalid" >
            <i class="fas fa-user text-dark" style="font-size:20px"></i>
            Create An Account
        </button>
    </div>
</form>

将表单的引用变量创建为“myForm”以禁用按钮并更改第二条有效消息中的内容

于 2018-06-19T10:47:36.440 回答
0

您应该将 ReactiveForms 与 FormBuilder 一起使用，然后您可以设置验证器，例如：

this.form= this.fb.group({
  'email': new FormControl('', [ Validators.require Validators.email]
 });

在官方文档、表单验证和反应式表单中阅读更多信息

于 2018-06-19T10:54:34.057 回答
0 
<div *ngIf="emailref.errors && (emailref.touched || emailref.dirty)" class="aler 
      alert-danger">
                <div *ngIf="!emailref.invalid?.pattern">
                    Invalid pattern
                </div>
                <div *ngIf="(emailref.touched || emailRef.dirty)">
                    Email is required
                </div>
</div>


    <br>
    <button type="submit" routerLink="/createaccount" class="btn btn-primary" [disabled]="emailref.invalid" >
        <i class="fas fa-user text-dark" style="font-size:20px"></i>
        Create An Account
    </button>`
于 2018-06-19T11:30:09.313 回答