Angular 反应式表单模式验证在阵列上无法正常工作

我有多个输入文本字段，用于以被动形式输入域名。按enter键时，该值将被推送到表单控件，该控件是一个数组。每当添加新值时，我希望使用regex对该数组中的每个项应用模式验证

但这并不像stackblitz中所看到的那样有效：

重现问题的步骤：

输入“com”。表格将失效。但是，如果我下一步输入“google”，该表单将生效

先输入“谷歌”，然后输入“com”。该表单对两种输入都有效

---

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

我认为默认验证器不能正确处理数组。也许你应该创建你自己的验证器

我围绕这个问题制定了一个快速的解决方案

app.component.html

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

---

此外，模式也不正确。

谢谢你的回答。我在stackblitz中收到损坏的内容错误。

<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}}

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
      })
 }