访问组件4+的角NgModel指令

Question

由于NgModel.control状态，我正在尝试更改样式。因为我想把它弄干，所以我认为一个指令读取组件NgModel状态就能做到这一点。

这可能吗？却找不到任何关于怎么做的暗示。

我的想法是这样写的：

<div class="fields">
    <app-dummy-selector name="dummy" 
        [(ngModel)]="dummy" required appValidationError>
    </app-selector-moneda>
</div>

然后，我的指令定义如下

@Directive({
  selector: '[appValidationError]'
})
export class validationError {
  // do some logic to add Styles via Renderer2 or ElementRef
  // based on NgNodel control state 
  constructor(private el: ElementRef, private renderer: Renderer2) { }

}

为了澄清UPDATE，我想避免的是避免像这样添加#ctrl="ngModel" [ngClass]="{ error: (ctrl.invalid) && ctrl.touched }"：

<div class="fields">
    <app-dummy-selector name="dummy" 
        #ctrl="ngModel" [ngClass]="{ error: (ctrl.invalid) && ctrl.touched }" 
        [(ngModel)]="dummy" required appValidationError>
    </app-selector-moneda>
</div>

Answer 1

您可以在主机上插入 NgControl 以访问控件。

constructor(@Host() private ngControl: NgControl) { }

至于处理错误的，您的问题似乎是关于在您的更新后，我可以建议以下两个包。(完全公开，他们是我的。)

• https://github.com/lazarljubenovic/ngx-common-forms
• https://github.com/lazarljubenovic/ngx-sin

它是用来处理像你这样的案件，以减少样板。