反应式表单模式验证无法在数组上正常工作答案

【问题标题】：Reactive form pattern validation not working properly on array反应式表单模式验证无法在数组上正常工作
【发布时间】：2020-04-21 03:15:11
【问题描述】：

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

但这并没有像在 stackblitz 中看到的那样按预期工作：https://stackblitz.com/edit/angular-cpc1jg

重现问题的步骤：

输入“com”。表格将失效。但是，如果我接下来输入“google”，表格就会生效。
先输入“google”，再输入“com”。该表单对两种输入均有效。

如果“com”是无效值，我希望表单在输入“com”时无效。这里出了什么问题？

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案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 => 代码修改取决于结果)

还有，模式不对。

【讨论】：

感谢您的回答。我在 stackblitz 中遇到损坏的内容错误。