将自定义验证指令添加到ol元素

Question

我正在使用模板驱动的表单。我在ngIf中有一个我称之为ngFor的列表。我想验证此列表是非空的。

我的HTML看起来像这样：

<form #f="ngForm" novalidate>
    <div *nfIf="predicate"
        <ol validateNotEmpty>
            <li *ngFor"let item of items">
                <input name="item-{{i.id}}" [(ngModel)]="item.text">
            </li>
        </ol>
    </div>
</form>

我的自定义验证指令如下所示：

import {Attribute, Directive, forwardRef} from '@angular/core';
import {Validator, AbstractControl, NG_VALIDATORS} from '@angular/forms';

@Directive({
    selector: '[validateNotEmpty]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => NotEmptyValidatorDirective), multi: true }
    ]
})

export class NotEmptyValidatorDirective implements Validator {
    validate(c: AbstractControl): { [key: string]: any } {
        console.log("Firing");
        return null;
    }
}

我知道它是正确连接的，因为当我将指令放在表单或输入元素上时，它会像它应该的那样触发。当我修改ol元素时，我可以解雇它：

<ol name="listname" validateNotEmpty [ngModel]="items" ngDefaultControl>

但是在改变发生之前就会发生火灾，因此对我来说并不是真的有用。那么当项目长度发生变化时，如何在本机ol元素上激活验证器？