HTML – 检查电子邮件是否与模糊匹配

发布时间：2020-12-14 18:41:55 所属栏目：资源来源：网络整理

导读：我正在尝试检查电子邮件字段和确认电子邮件字段是否相互匹配.也就是说,用户输入他们的电子邮件然后他们必须再次确认.我希望匹配/验证在模糊时发生(当用户按Enter键或文本字段失去焦点时). 这是我的ts文件： import {Component,OnInit} from '@angular/core';

我正在尝试检查电子邮件字段和确认电子邮件字段是否相互匹配.也就是说,用户输入他们的电子邮件然后他们必须再次确认.我希望匹配/验证在模糊时发生(当用户按Enter键或文本字段失去焦点时).

这是我的ts文件：

import {Component,OnInit} from '@angular/core';
import {User} from './user.interface';
import {FormBuilder,FormGroup,ValidatorFn} from '@angular/forms';

@Component({
    selector: 'my-email',templateUrl: '/app/components/profile/email.component.html',styleUrls:['styles.css'],})

export class EmailComponent implements OnInit {   

   public user : User;
   Form : FormGroup; 

   ngOnInit() {
        // initialize model here
        this.user = {
            Email: '',confirmEmail: ''
        }
         if(this.Form.valid) {
            this.displayErrors = false;
         }
    }

     constructor(fb: FormBuilder,private cookieService: CookieService,private router: Router) {
          this.Form = fb.group({
            email: [''],confirmEmail: ['']
        },{
            validator: this.matchingEmailsValidator('email','confirmEmail')
        });


     }

    save(model: User,isValid: boolean) {
        // call API to save customer
        //save email

    }

    matchingEmailsValidator(emailKey: string,confirmEmailKey: string): ValidatorFn {
        return (group: FormGroup): {[key: string]: any} => {

            let email = group.controls[emailKey];
            let confirmEmail = group.controls[confirmEmailKey];

            if (email.value !== confirmEmail.value) {
                return {
                    mismatch: true
                };
            }
        };
    }
}

这是我的观点：

<form [formGroup]="Form" novalidate (ngSubmit)="Form.valid && save(Form.value,Form.valid)">
    <div class="container-fluid">
    <div id = "container" class="contain" style="text-align: center">
        <div> 
            <fieldset class="form-group">
            <label id = "rounded" class="item item-input .col-md-6 .col-md-offset-3">
                <input class="email-address-entry form-control" name="email" type="email" placeholder="name@domain.com" formControlName="email" pattern="^(w|[0-9.!#$%&’*+/=?^_`{|}~-])+@(w|[0-9-])+(?:??[.](w|[0-9-])+)*$"/>
            </label>
                <p class="Reenter-your-email">Reenter your email to confirm</p>
            <label id = "rounded" class="item item-input">
                <input class="email-address-entry form-control" (blur)="displayErrors=true" name="confirmEmail" type="email" placeholder="name@domain.com" formControlName="confirmEmail" validateEqual="email"/>
            </label> 
            </fieldset>
        </div> 
         <div>
          <label class="entry-invalid">
          <p *ngIf="displayErrors && !Form.get('email').valid">The email you entered does not match.</p>
          </label>
        </div>
        <div (click)="Form.get('email').length > 0 ? save(Form.value,Form.valid) : NaN" class="{{ Form.get('email').length > 0 ? 'container-fluid anchorBottomHighlight' : 'container-fluid anchorBottom'}}">
            <label class="footerLabel">Confirm</label>
        </div>
    </div>
    </div> 
</form>

目前,通过它的设置方式,验证会发生,但是在输入正确的匹配时它不会被清除.我想知道如何正确设置我的视图？因此,如果设置了正确的匹配,则显示/隐藏验证消息.

它看起来像Form.get(’email’).length> 0永远不会大于0 /从不命中,因此我的标签不会切换为可点击.

我正在使用Angular 2和反应形式.

解决方法

看起来你正在混合两种形式语法：模板驱动形式和模型驱动形式.

由于您使用FormBuilder在类中声明了一个表单模型,我假设您需要一个模型驱动的表单.

这意味着您的字段不需要[(ngModel)]或#EmailAddress等属性.

而不是：

<input type="email" [(ngModel)]="user.EmailAddress"  required #EmailAddress="ngModel">

写这个：

<!-- Now I'm using `formControlName` to bind the field to the model -->
<!-- Its value must match one of the names you used in the FormBuilder -->
<input type="email" formControlName="email">

必须在FormBuilder中声明所有验证器.不仅匹配EmailsValidator,还需要：

this.Form = fb.group({
  email: ['',Validators.required],confirmEmail: ['',Validators.required]
},{
  validator: this.matchingEmailsValidator('email','confirmEmail')
});

现在,您可以使用以下语法访问字段：

// In the class
this.Form.get('email').value
this.Form.get('email').errors

<!-- In the template -->
{{ Form.get('email').value }}
{{ Form.get('email').errors }}

您可以使用这些语法来显示错误.例如：

<input type="email" formControlName="email">
<p *ngIf="Form.get('email').dirty && Form.get('email').errors.required">
  This field is required.
</p>

在上面的示例中,如果触摸了电子邮件字段(即用户尝试输入内容),则显示错误消息,并且存在所需的错误.

您还可以通过浏览器的开发工具检查表单的标记来验证是否强制执行验证规则. Angular应该在< input>中添加类似.ng-invalid或.ng-valid的类.具有验证规则的标签.

最后,关于你的问题来检查模糊的电子邮件匹配.你不能推迟Angular的验证,它将实时发生(如用户类型).但您可以等待模糊事件显示错误.

将最后一条建议与我之前的示例结合起来,如果电子邮件字段为空且失去了焦点(模糊事件),则可能出现错误：

<input type="email" formControlName="email" (blur)="displayErrors=true">
<p *ngIf="displayErrors && Form.get('email').dirty && Form.get('email').errors.required">
  This field is required.
</p>

在Euridice发布this Plunkr后更新(01-FEB-2017)：

>您仍然可以在模板中使用更多验证代码.就像我说的那样,所有的验证者都应该在表格模型中声明(使用FormBuilder).进一步来说：

>电子邮件字段中的pattern =“…”属性应替换为表单模型中的Validators.pattern().
> confirmEmail字段中的validateEqual =“email”属性是什么？你没有在任何地方使用它.

>主要问题是您的测试显示错误消息：* ngIf =“displayErrors&&！Form.get(’email’).valid&& Form.get(’email’).error.mismatch” .

>首先,属性是带有“s”的错误,而不是错误.
>此外,您的自定义验证器正在设置表单上的错误,而不是在电子邮件字段上.这意味着您应该从Form.errors.mismatch中检索不匹配的自定义错误,而不是Form.get(’email’).errors.mismatch.

这是更新的,有效的Plunkr：https://plnkr.co/edit/dTjcqlm6rZQxA7E0yZLa?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!