Angular 指令中带有HostListener的FormArray

我正在循环中创建输入表单：

  <tr formArrayName="items" *ngFor="let vatCat of items.controls; let i = index">
            <td [formGroupName]="i">
              <input name="symbol" minlength="1" maxlength="1" [(ngModel)]="symbol" appUppercase type="text" formControlName="symbol">
            </td>
            <td [formGroupName]="i">
              <input name="value"  type="number" [ngModel]="0" formControlName="value">
            </td>
            <td [formGroupName]="i">
              <span class="table-remove">
                <button (click)="removeItem(i)" type="submit" class="btn btn-danger btn-rounded btn-sm my-0">Usuń</button>
              </span>
            </td>
....

目前有两个问题，第一个是@Output value传播到每个输入，而不是与之相关的这个输入。第二个是错误

xpression在检查后已更改。上一个值：“ng有效：false”。当前值：“ng valid:true”。

---

有可能让它一起工作吗？

好的，我让它工作，通过改变一点指令，一次解决了两个问题：

@Directive({
  selector: '[appUppercase]'
})
export class UppercaseDirective {
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  value: any;

  constructor(private el: ElementRef) {}

  @HostListener('input') onInputChange() {
    this.el.nativeElement.value = this.el.nativeElement.value.toUpperCase();
  }
}

@指令({
选择器：“[appUppercase]”
})
导出类大写指令{
@Output（）ngModelChange:EventEmitter=neweventemitter（）；
价值：任何；
构造函数（私有el:ElementRef）{}
@HostListener（'input'）onInputChange（）{
this.el.nativeElement.value=this.el.nativeElement.value.toUpperCase（）；
}
}

 formArray = this.formBuilder.group({
    items: this.formBuilder.array([])
  });

 buildItem(): FormGroup {
    return this.formBuilder.group({
      symbol: new FormControl('', this.vatCategoryValidation.bind(this)),
      value: new FormControl('', this.vatValueValidation.bind(this))
    });
  }
 addItem() {
    this.items.push(this.buildItem());
  }

@Directive({
  selector: '[appUppercase]'
})
export class UppercaseDirective {
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  value: any;

  constructor(private el: ElementRef) {}

  @HostListener('input') onInputChange() {
    this.el.nativeElement.value = this.el.nativeElement.value.toUpperCase();
  }
}