Javascript 角度5多输入验证

我正在尝试进行自定义验证，因此我创建了以下指令：

import {Directive, Input} from '@angular/core';
import {AbstractControl, NG_VALIDATORS, Validator} from '@angular/forms';
@Directive({
    selector: '[appEqualValidator]',
    providers: [
        {provide: NG_VALIDATORS, useExisting: EqualValidatorDirective, multi: true}
    ]
})
export class EqualValidatorDirective implements Validator {
    @Input('inputOne')
    inputOne: string;
    @Input('inputTwo')
    inputTwo: string;

    constructor() {
    }

    validate(c: AbstractControl) {

        const value = c.value;
        if ((value == null || value === undefined || value === '') && this.inputOne === this.inputTwo) {
            return {
                equalTo: {condition: this.inputOne === this.inputTwo}
            };
        }
        return null;
    }
}

现在，我正试图将此添加到我的表单中，但在使用多个输入时遇到了一些问题：

 <div class="form-group">
    <label>E-mail</label>
    <input type="email" class="form-control" placeholder="Indtast email" [(ngModel)]="model.email" name="email" [email]="true" required/>
</div>
<div class="form-group">
    <label style="display: block">Gentag E-mail</label>
    <input type="email" class="form-control" placeholder="Gentag email" [(ngModel)]="model.emailRepeat" required [email]="true" 
[appEqualValidator]="value" name="emailRepeat"/>
    <li *ngIf="!emailVerify">
        De to emails er ikke ens
    </li>
</div>

电子邮件
Gentag电子邮件

我喜欢电子邮件

我不知道如何在表单中使用该指令。确保我能得到两种输入

---

我希望你们中的一些人能给我指出正确的方向。

你们可以这样做，将两个输入都包装在一个文件中。它扩展了AbstractControlDirective，因此可能需要验证器

<div ngModelGroup="emails" #emails="ngModelGroup" [appEqualValidator]="value">
    <div class="form-group">
        <label>E-mail</label>
        <input type="email" class="form-control" placeholder="Indtast email" [(ngModel)]="model.email" name="email" [email]="true" required/>
    </div>
    <div class="form-group">
        <label style="display: block">Gentag E-mail</label>
        <input type="email" class="form-control" placeholder="Gentag email" [(ngModel)]="model.emailRepeat" required [email]="true" name="emailRepeat"/>
        <li *ngIf="!emailVerify">De to emails er ikke ens</li>
    </div>
</div>

电子邮件
Gentag电子邮件
删除电子邮件

每当子控件发生更改时，将调用组验证程序。在

validate（）

中，您需要强制转换为

FormGroup

并输入值相等

---

您可以将两个输入包装在一个文件中。它扩展了AbstractControlDirective，因此可能需要验证器

<div ngModelGroup="emails" #emails="ngModelGroup" [appEqualValidator]="value">
    <div class="form-group">
        <label>E-mail</label>
        <input type="email" class="form-control" placeholder="Indtast email" [(ngModel)]="model.email" name="email" [email]="true" required/>
    </div>
    <div class="form-group">
        <label style="display: block">Gentag E-mail</label>
        <input type="email" class="form-control" placeholder="Gentag email" [(ngModel)]="model.emailRepeat" required [email]="true" name="emailRepeat"/>
        <li *ngIf="!emailVerify">De to emails er ikke ens</li>
    </div>
</div>

电子邮件
Gentag电子邮件
删除电子邮件

每当子控件发生更改时，将调用组验证程序。在

validate（）

中，您需要强制转换为

FormGroup

并输入值相等

---

我对反应形式做了类似的事情

以下是验证程序：

function emailMatcher(c: AbstractControl): { [key: string]: boolean } | null {
  const emailControl = c.get('email');
  const confirmControl = c.get('confirmEmail');

  if (emailControl.pristine || confirmControl.pristine) {
    return null;
  }

  if (emailControl.value === confirmControl.value) {
    return null;
  }
  return { 'match': true };
}

以下是formbuilder：

this.customerForm = this.fb.group({
  firstName: ['', [Validators.required, Validators.minLength(3)]],
  lastName: ['', [Validators.required, Validators.maxLength(50)]],
  emailGroup: this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    confirmEmail: ['', Validators.required],
  }, { validator: emailMatcher }),
  phone: ''
});

以下是HTML：

<div class="form-group row">
  <label class="col-md-2 col-form-label"
         for="emailId">Email</label>
  <div class="col-md-8">
    <input class="form-control"
           id="emailId"
           type="email"
           placeholder="Email (required)"
           formControlName="email"
           [ngClass]="{'is-invalid': customerForm.get('emailGroup').errors ||
                                      ((customerForm.get('emailGroup.email').touched || 
                                      customerForm.get('emailGroup.email').dirty) && 
                                      !customerForm.get('emailGroup.email').valid) }" />
    <span class="invalid-feedback">
      <span *ngIf="customerForm.get('emailGroup.email').errors?.required">
        Please enter your email address.
      </span>
      <span *ngIf="customerForm.get('emailGroup.email').errors?.email">
        Please enter a valid email address.
      </span>
    </span>
  </div>
</div>

<div class="form-group row">
  <label class="col-md-2 col-form-label"
         for="confirmEmailId">Confirm Email</label>
  <div class="col-md-8">
    <input class="form-control"
           id="confirmEmailId"
           type="email"
           placeholder="Confirm Email (required)"
           formControlName="confirmEmail"
           [ngClass]="{'is-invalid': customerForm.get('emailGroup').errors ||
                                     ((customerForm.get('emailGroup.confirmEmail').touched || 
                                      customerForm.get('emailGroup.confirmEmail').dirty) && 
                                      !customerForm.get('emailGroup.confirmEmail').valid) }" />
    <span class="invalid-feedback">
      <span *ngIf="customerForm.get('emailGroup.confirmEmail').errors?.required">
        Please confirm your email address.
      </span>
      <span *ngIf="customerForm.get('emailGroup').errors?.match">
        The confirmation does not match the email address.
      </span>
    </span>
  </div>
</div>

电子邮件
请输入您的电子邮件地址。
请输入有效的电子邮件地址。
确认电子邮件
请确认您的电子邮件地址。
确认与电子邮件地址不匹配。

您可以在此处找到完整的解决方案：

---

我对反应形式做了类似的事情

以下是验证程序：

function emailMatcher(c: AbstractControl): { [key: string]: boolean } | null {
  const emailControl = c.get('email');
  const confirmControl = c.get('confirmEmail');

  if (emailControl.pristine || confirmControl.pristine) {
    return null;
  }

  if (emailControl.value === confirmControl.value) {
    return null;
  }
  return { 'match': true };
}

以下是formbuilder：

this.customerForm = this.fb.group({
  firstName: ['', [Validators.required, Validators.minLength(3)]],
  lastName: ['', [Validators.required, Validators.maxLength(50)]],
  emailGroup: this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    confirmEmail: ['', Validators.required],
  }, { validator: emailMatcher }),
  phone: ''
});

以下是HTML：

<div class="form-group row">
  <label class="col-md-2 col-form-label"
         for="emailId">Email</label>
  <div class="col-md-8">
    <input class="form-control"
           id="emailId"
           type="email"
           placeholder="Email (required)"
           formControlName="email"
           [ngClass]="{'is-invalid': customerForm.get('emailGroup').errors ||
                                      ((customerForm.get('emailGroup.email').touched || 
                                      customerForm.get('emailGroup.email').dirty) && 
                                      !customerForm.get('emailGroup.email').valid) }" />
    <span class="invalid-feedback">
      <span *ngIf="customerForm.get('emailGroup.email').errors?.required">
        Please enter your email address.
      </span>
      <span *ngIf="customerForm.get('emailGroup.email').errors?.email">
        Please enter a valid email address.
      </span>
    </span>
  </div>
</div>

<div class="form-group row">
  <label class="col-md-2 col-form-label"
         for="confirmEmailId">Confirm Email</label>
  <div class="col-md-8">
    <input class="form-control"
           id="confirmEmailId"
           type="email"
           placeholder="Confirm Email (required)"
           formControlName="confirmEmail"
           [ngClass]="{'is-invalid': customerForm.get('emailGroup').errors ||
                                     ((customerForm.get('emailGroup.confirmEmail').touched || 
                                      customerForm.get('emailGroup.confirmEmail').dirty) && 
                                      !customerForm.get('emailGroup.confirmEmail').valid) }" />
    <span class="invalid-feedback">
      <span *ngIf="customerForm.get('emailGroup.confirmEmail').errors?.required">
        Please confirm your email address.
      </span>
      <span *ngIf="customerForm.get('emailGroup').errors?.match">
        The confirmation does not match the email address.
      </span>
    </span>
  </div>
</div>

电子邮件
请输入您的电子邮件地址。
请输入有效的电子邮件地址。
确认电子邮件
请确认您的电子邮件地址。
确认与电子邮件地址不匹配。

您可以在此处找到完整的解决方案：

---

您是否考虑过使用反应式表单？Angular有验证器，您可以轻松实现。请看这里：@IvanS95是否有一个等于的值，您可以在其中匹配两个输入字段？您是否考虑过使用被动形式？Angular有验证器，您可以轻松实现。请看此处：@IvanS95是否有一个等于的值，您可以在其中匹配两个输入字段？嘿，mate当我尝试此操作时，我得到：无法绑定到'appEqualValidator'，因为它不是'div'的已知属性嘿，mate当我尝试此操作时，我得到：无法绑定到'appEqualValidator'，因为它不是'div'的已知属性