javascript - NG_VALUE_ACCESSOR 未在动态组件加载器上执行验证

Question

我正在尝试向我的动态组件加载器添加一个验证器，但是，它似乎不起作用。我错过了什么？堆栈闪电战

这是我的表单的设置方式。我有一个检查表单invalid属性的按钮，然后它应该根据组件加载器是否有效来打开/关闭。

<form #f="ngForm" class="role-add-modify" autocomplete="off">
  <div *ngFor="let field of fields;index as idx">
    <ui-component-loader #componentLoader
                         [(ngModel)]="field.value" [name]="field.id"
                         [required]="field.required" [field]="field"
                         [disabled]="field.disabled"
                         *ngIf="field.component">
    </ui-component-loader>
  </div>
  <button *ngIf="state === ModalEditState.Edit" (click)="editItem()"
          [disabled]="f.invalid || !f.dirty">Save Edits
  </button>
</form>

接下来我有实现ControlValueAccessor. 在父类中AccessorComponent（已经在模板中输入的组件上工作）。

@Component({
  selector: 'ui-component-loader',
  template: '<ng-template componentHost></ng-template>'
})
export class ComponentLoaderComponent<T extends IComponentLoader> extends AccessorComponent implements OnInit {
  public get invalid() {
    console.log('invalidator');
    return (!this.componentRef?.instance.validate()) || true;
  }

  public get valid() {
    console.log('validator');
    return this.componentRef?.instance.validate() || false;
  }

  public ngOnInit() {
    this.loadComponent();
  }

  public loadComponent() {
    // Dynamically loads the component and saves it to `componentRef`
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.field.component);

    const viewContainerRef = this.componentHost.viewContainerRef;
    viewContainerRef.clear();

    this.componentRef = viewContainerRef.createComponent(componentFactory);
  }
}

最后，我将提供程序添加到我@NgModule的此处（我不确定是否需要这两个提供程序）。

@NgModule({
  providers: [
    { provide: NG_VALIDATORS, useExisting: ComponentLoaderComponent, multi: true },
    { provide: NG_VALUE_ACCESSOR, useExisting: ComponentLoaderComponent, multi: true }
  ]
})
export class UIModule { }

被加载的组件内部的 htmlComponentLoaderComponent如下所示：

<div *ngFor="let item of displayData;index as idx" [id]="'client-role_'+idx">
  <select-field>
    <select-options
          (onDropdownChange)="onClientChange(item, $event, roleSelect)"
          defaultLabel="Select One..."
          [(ngModel)]="item.selectedClient" [required]="true"
          [name]="'clients'+idx"
          [itemList]="item.clients">
    </select-options>
  </select-field>
</div>

当我对组件进行更改时（如下图所示），我希望invalid或valid执行，但是，两个 getter 都没有被调用。

输出如下所示：

标签： javascriptangulartypescript