Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2:如何在该Component中访问自定义Component的FormControl实例?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我一直在阅读如何在Angular2中构建自定义FormControls,但我无法得到我正在努力完成验证的工作.我有一个正常的输入控件,我想在自定义组件中包装,以便我可以这样做:

<my-control name="something" [(ngModel)]="model@L_892_4@mething" required></my-control>

而不是每次都重复这个:

<div class="form-group has-FeedBACk" [ngClass]="{'has-success': someInput.valid,'has-error': someInput.invalid && someInput.dirty}">
    <label class="control-label" for="somEID">{{label || 'Some Input'}}</label>
    <input type="test" class="form-control" id="somEID" placeholder="Some Input" [ngModel]="value" (ngModel)="onChange($event)" name="someInput" required #someInput="ngModel" minlength="8"/>
    <span class="glyphicon form-control-FeedBACk" aria-hidden="true" [ngClass]="{'glyphicon-ok': someInput.valid,'glyphicon-remove': someInput.invalid && someInput.dirty}"></span>
    <div [hidden]="someInput.valid || someInput.prisTine || !someInput.errors.required" class="text-danger">Some Input is required</div>
    <div [hidden]="someInput.valid || someInput.prisTine || !someInput.errors.minlength" class="text-danger">Some Input must be at least 8 characters</div>
</div>

所以我通过自定义组件实现了以下有关如何在线创建自定义组件的文章

https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

缺少的是能够将验证移出组件,但允许自定义组件处理该验证的显示.因此,如果你看一下我的目的是允许组件的用户指定验证而不是让组件强加特定的验证(注意某些验证是组件固有的,例如电子邮件地址组件会验证它是一封没有用户指定的电子邮件).请注意,必需的是该客户组件的使用情况.

那么如何在该组件的定义中获得对自定义组件的FormControl的引用?注意:我理解如何访问模板的FormControl实例中的输入字段,因为上面的代码完全证明了这一点.我要求的是模板所在的自定义控件的FormControl实例.在我引用的文章中,它将是CounterInputComponent的FormControl.

解决方法

添加这似乎工作:

@ViewChild(NgModel) model: NgModel;

然后你可以通过以下方式访问FormControl:

this.model.control

大佬总结

以上是大佬教程为你收集整理的Angular 2:如何在该Component中访问自定义Component的FormControl实例?全部内容,希望文章能够帮你解决Angular 2:如何在该Component中访问自定义Component的FormControl实例?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。