Angular 反应形式 IP 地址验证器

Question

您好，我正在尝试对 Angular 中的 IP 地址使用验证器。然而，似乎即使我输入了一个无效的 IP 地址，即12.2.2.2...，GUI 显示它是有效的（见图）。但是，控制台日志显示它是模式不匹配（这意味着它检测到不正确的模式）。我不确定我错过了什么。现在开始感到困惑。需要一双新的眼睛来发现缺陷。

请注意，所需部分已经在使用ipaddress。我只是对它为什么不能进行模式验证感到困惑。看图

见我的stackblitz

这是我的代码

HTML

<div class="form-group row required" [ngClass]="{
  'is-invalid': ipaddress.invalid && (ipaddress.dirty || ipaddress.touched),
  'is-valid': ipaddress.valid && (ipaddress.dirty || ipaddress.touched)
}">
  <label for="ipaddress" class="col-sm-3 col-form-label">IP Address</label>
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="IP Address"
        id="ipaddress" name="ipaddress" formControlName="ipaddress"
        ngbAutofocus required>
    <div class="form-control-feedback invalid-feedback"
        *ngIf="ipaddress.errors">
      <p *ngIf="ipaddress.errors.required">IP Address is required</p>
      <p *ngIf="ipaddress.errors.pattern">Invalid IP Address format</p>
    </div>
  </div>
</div>

TS 文件

  this.ipaddress = new FormControl('', {
      validators: Validators.compose([
        Validators.required,
        Validators.pattern('(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)')
      ])
    });

Answer 1

我认为你有这种不一致是因为你混合了Bootstrap understands 的两种类型的验证：

客户端验证：

• 需要<form> 标记上的was-validated 类。

服务器端验证：

• 标签上不需要was-validated 类。
• 需要输入控件上的.is-valid 或.is-invalid 类。

您的 IP 地址输入控件上有 required 属性。此属性允许浏览器应用本机内置表单验证，这意味着如果该控件无效，则它匹配:invalid CSS 伪类。 Bootstrap 框架为此行为提供了专门的类：

.was-validated .form-control:invalid {
  border-color: <red>;
  ...

由于您还将 was-validated 类添加到 <form> 标记，因此它可以按预期工作。

另一方面，您使用 Angular 验证模式：

this.ipaddress = new FormControl('', [
  Validators.required,
  Validators.pattern("....")
]);

它不会应用内置浏览器验证，您必须手动设置.is-valid 或.is-invalid。但是您只能对 Bootstrap 使用一种类型的验证。

所以，这里有你的选择：

1. 仅使用客户端验证：

html

<input type="ipaddress"
    class="form-control"
    formControlName="ipaddress"
    required
    pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$">

Stackblitz Example

1. 使用 Bootstrap 服务器端验证逻辑。

这样做

• 您需要删除将was-validated 类添加到form 标记，而是将所有当前控件设置为已触摸。

例如

this.myform.markAllAsTouched();

• 移动添加 .is-valid 和 .is-invalid 类以控制自身而不是其包装器

html

<input type="ipaddress"
    class="form-control"
    formControlName="ipaddress"
    [ngClass]="{
  'is-invalid': ipaddress.invalid && (ipaddress.dirty || ipaddress.touched),
  'is-valid': ipaddress.valid && (ipaddress.dirty || ipaddress.touched)
}">

Stackblitz Example

Answer 2

对于 js & ts 你可以使用以下：

Validators.pattern('(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)')