加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 2:如何在该Component中访问自定义Component的FormContr

发布时间:2020-12-17 17:09:23 所属栏目:安全 来源:网络整理
导读:所以我一直在阅读如何在Angular2中构建自定义FormControls,但我无法得到我正在努力完成验证的工作.我有一个正常的输入控件,我想在自定义组件中包装,以便我可以这样做: my-control name="something" [(ngModel)]="model.something" required/my-control 而不
所以我一直在阅读如何在Angular2中构建自定义FormControls,但我无法得到我正在努力完成验证的工作.我有一个正常的输入控件,我想在自定义组件中包装,以便我可以这样做:

<my-control name="something" [(ngModel)]="model.something" 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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读