Angular Kendo 网格反应式网格编辑添加行状态更改订阅在模糊时未触发

问：

使用状态更改订阅使用验证消息更新通知控件。除了新添加的行外，所有工作正常。按 Tab 键退出空必填字段会正确触发验证，将 ng-invalid 添加到输入文本框中，但不会触发 statusChange 订阅。

在显示输入框之前，formGroup.status 显示为设置为“INVALID”。我猜 statusChange 错过了无效的字段，因为它已经被标记为无效（叹气）。正确添加和删除字符会触发订阅。

我使用了这个 Kendo 示例 （https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-directives/#toc-reactive-editing-directive），并在堆栈闪电战 （https://angular-5eh2t5.stackblitz.io） 中添加了 statusChange 订阅。

我尝试了 updateValueAndValidity（） 中的建议（反应式表单说当新的 FormGroup 在有效时添加到 FormArray 时无效）但没有成功。

我知道这是一个狭隘的情况，但有没有人遇到过这种情况并找到了解决方法，以便在添加 ng-invalid 时在新项目上触发订阅？

import { Component } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';

import { products } from './products';
import { Product } from './model';
import { CreateFormGroupArgs } from '@progress/kendo-angular-grid';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid
            [kendoGridReactiveEditing]="createFormGroup"
            [kendoGridBinding]="products"
            [pageSize]="5"
            [pageable]="true"
            [sortable]="true"
            [navigable]="true"
        >
            <ng-template kendoGridToolbarTemplate>
                <button kendoGridAddCommand>Add new</button>
                formGroup status "{{ formGroup.status }}", {{ statusChanged }} statusChanged subscription events
            </ng-template>
            <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
            <kendo-grid-column field="UnitPrice" editor="numeric" title="Price"></kendo-grid-column>
            <kendo-grid-column field="Discontinued" editor="boolean" title="Discontinued"></kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" editor="numeric" title="Units In Stock"></kendo-grid-column>
            <kendo-grid-command-column title="command" [width]="220">
                <ng-template kendoGridCellTemplate let-isNew="isNew">
                    <button kendoGridEditCommand [primary]="true">Edit</button>
                    <button kendoGridRemoveCommand>Remove</button>
                    <button kendoGridSaveCommand [disabled]="formGroup.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
                    <button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
                </ng-template>
            </kendo-grid-command-column>
        </kendo-grid>
    `,
})
export class AppComponent {
    public products: Product[] = products;
    public formGroup: FormGroup = this.formBuilder.group({
        ProductID: null,
        ProductName: '',
        UnitPrice: null,
        UnitsInStock: null,
        Discontinued: false,
    });

    public statusChanged: number = 0;

    constructor(private formBuilder: FormBuilder) {
        this.createFormGroup = this.createFormGroup.bind(this);
    }

    public createFormGroup(args: CreateFormGroupArgs): FormGroup {
        const item = args.isNew ? new Product() : args.dataItem;

        this.statusChanged = 0;

        this.formGroup = this.formBuilder.group({
            ProductID: item.ProductID,
            ProductName: [item.ProductName, Validators.required],
            UnitPrice: item.UnitPrice,
            UnitsInStock: [
                item.UnitsInStock,
                Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')]),
            ],
            Discontinued: item.Discontinued,
        });

        this.formGroup.updateValueAndValidity();

        this.formGroup.statusChanges.subscribe(status => {
            this.statusChanged++;
        })

        return this.formGroup;
    }
}