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) { }

}

为了澄清更新，我想避免的是避免像这样添加#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) { }

至于更新后您的问题似乎与视图上的处理错误，我可以建议以下两个包。（完全披露，他们是我的。）

它专为处理你的案件而设计，以减少样板。

访问组件NgModel的Angular 4+指令

1 个答案: