Question

我有多个输入文本字段，用于以反应形式输入域名。按下回车键后，该值将被推送到作为数组的表单控件中。每当添加新值时，我都想使用正则表达式在此数组中的每个项目上应用模式验证。

但这不能按预期的那样工作，如stackblitz：https://stackblitz.com/edit/angular-cpc1jg

重现该问题的步骤：

输入“ com”。该表格将无效。但是，如果我接下来输入“ google”，则该表格将有效。
首先输入“ google”，然后输入“ com”。该表格对两个输入均有效。

如果“ com”是无效值，那么我希望每当输入“ com”时表格都是无效的。怎么了？

Answer 1

我认为默认的验证器不适用于数组。也许您应该创建自己的验证器。

我建立了解决该问题的快速解决方案。 https://stackblitz.com/edit/angular-zku8h7

app.component.html

<form [formGroup]="form">
<div class="form-group row">
    <div class="col-md-9">
        <ng-select class="disable-arrow" 
  [items]="[]" 
  (change)="valueChanged($event)" 
  [addTag]="true"
        [multiple]="true" [selectOnTab]="true" [isOpen]="false" placeholder="Enter domains"
            formControlName="domains">
        </ng-select>
    </div>
</div>
<br>
    Values: {{form.value | json}}
<br>
    Errors: {{form.valid | json}}

app.components.ts

constructor(private fb: FormBuilder) {

     this.form = this.fb.group({
        domains: [[]]
      });

 }


valueChanged(value) {
  const last = value.length;
  const valueStr = value[last - 1];

  if (!valueStr.match(/[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/)) {
    value.pop()
    this.form.patchValue({
           domains: value
      })
 }

另一种解决方案是使用 this.form.valueChanges（）。subcribe（arrayValues =>要修改的代码取决于结果）

此外，模式也不正确。

反应形式模式验证无法在数组上正常工作

1 个答案: