Question

我是Angular的新手，我知道我不是第一个问这个问题的人，我正在使用Angular 5应用程序，在这里我需要验证用户邮件，如果是有效邮件我有一个按钮单击该按钮我需要导航到新组件。

这里的模式验证工作正常但是如果我触摸了电子邮箱但没有输入任何电子邮件我想要显示＆＃34;电子邮件是必需的＆＃34;但它不适合我。

另一件事是我想让＆＃34;按钮＆＃34; 只有在输入有效的电子邮件后才能点击。

<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>

任何人都可以帮我解决这个问题。

Answer 1

以下是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>

创建表单的引用变量为＆＃39; myForm＆＃39;禁用按钮并更改第二个有效消息中的内容

Answer 2

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

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

在官方文档Form Validation和Reactive forms

上阅读更多内容

Answer 3

<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>`

＆＃34;需要电子邮件＆＃34;验证在Angular5的bootstrap电子邮箱中不起作用

3 个答案: