When using igx-input-group, there is no UI feedback after Re...

来自 : CSDN技术社区 发布时间：2021-03-25

私信 访问主页

weixin_39776344 2020-12-30 07:11 首页 开源项目 When using igx-input-group, there is no UI feedback after ReactiveForm\'s markAsTouched is called. Description

When using igx-input-group, there is no UI feedback after ReactiveForm s markAsTouched is called.

Steps to reproduceGo to https://stackblitz.com/edit/igx-editors-v5-2-1 (using igx-form-group class)Click SUBMIT buttonGo to https://stackblitz.com/edit/igx-editors-issue (using igx-input-group component)Click SUBMIT buttonResult

On the step 4, there is no UI feedback.

Expected result

There should be UI feedback.

I used igx-form-group class before and it worked well. I want igx-input-group to work as well.

该提问来源于开源项目 IgniteUI/igniteui-angular

点赞 写回答 收藏 复制链接分享 删除 再等等 结题 再想想 12条回答

私信 访问主页

weixin_39641876 2月前

not sure about this. You should do what you need to do to make it work. I m just glad the UI issue was addressed.

点赞 评论 复制链接分享

私信 访问主页

weixin_39776344 2月前

if the initial value of fullName is blank, igx-input-group doesn t get any UI feedback after clicking Submit button.

https://stackblitz.com/edit/angular-t9inrw

So I think we still need to call updateValueAndValidity, though...

Could you tell me your thoughts on this?

By the way, here is my sample using updateValueAndValidity.https://stackblitz.com/edit/igx-editors-issue

点赞 评论 复制链接分享

私信 访问主页

weixin_39641876 2月前

the above workaround is no longer required. This sample shows the new ways to work with ReactiveForms and radio buttons.

https://stackblitz.com/angular/xlodgdreenr?file app%2Fradio-group-sample%2Fradio-group-sample.component.ts

点赞 评论 复制链接分享

私信 访问主页

weixin_39641876 2月前

do you have a working project you can share?

点赞 评论 复制链接分享

私信 访问主页

weixin_39785422 2月前

It s not yet in the docs, but it s on the TODO list.

点赞 评论 复制链接分享

私信 访问主页

weixin_39641876 2月前

Has this required workaround been put in public docs?

点赞 评论 复制链接分享

私信 访问主页

weixin_39776344 2月前

What I was concerned about was resolved by your additional commit. Thank you so much!https://github.com/IgniteUI/igniteui-angular/commit/b0cf011dd5b66bd994c1436b6ac7de054e3d7897#diff-6f41a12bd84d5e6d3bad3cad109e10c3R81

点赞 评论 复制链接分享

私信 访问主页

weixin_39702714 2月前

, yes what you just explained is essentially the issue here and why we need to call updateValueAndValidity

点赞 评论 复制链接分享

私信 访问主页

weixin_39776344 2月前

,

I understand why we need to call updateValueAndValidity. Thank you for your great work!https://github.com/IgniteUI/igniteui-angular/commit/d56386b8cc310e9ba6a140aec0637847699dc083#diff-6f41a12bd84d5e6d3bad3cad109e10c3R125

Note, that it used to work previously as we had a style that was applied when angular adds ng-touched to the component s classlist, but this is no longer the case.

I m a little concerned. For example, when just focusing in/out an input, Reactive Forms adds ng-touched class but doesn t emit statusChanges. So I guess IgxInput cannot know whether the input has been touched or not.

点赞 评论 复制链接分享

私信 访问主页

weixin_39702714 2月前

I have just committed a fix for this. However, it requires a small change in the sample for it to work properly. Since markAsTouched simply sets the form control s touched field to true, we have no way of reacting to it, so you need to call updateValueAndValidity after you call markAsTouched:

typescriptif (!this.form.valid) { for (let key in this.form.controls) { this.form.controls[key].markAsTouched(); this.form.controls[key].updateValueAndValidity();

Note, that it used to work previously as we had a style that was applied when angular adds ng-touched to the component s classlist, but this is no longer the case.

点赞 评论 复制链接分享

私信 访问主页

weixin_39776344 2月前

, I m sorry about that.

Here is the first link.https://stackblitz.com/edit/igx-editors-v5-2-1

Here is the second link.https://stackblitz.com/edit/igx-editors-issue

I have fixed the links in the Steps to reproduce as well.

点赞 评论 复制链接分享

私信 访问主页

weixin_39731586 2月前

sorry, I can t open the samples.

点赞 评论 复制链接分享 提交 再想想 采纳 为你推荐 在JavaScript中加密字符串并使用RSA技术在PHP中解密 javascriptcryptographyencryptionphp 1个回答 点击登录 提问题 欢迎建议意见 . 如何写高质量提问和回答？ 采纳榜7天 被采纳次数 ProfSnail 21 coagenth 16 幻灰龙 164 qq_34124780 145 Jack_Yang(数据分析及可视化) 126 规则边缘 117 GoCityPass新加坡曼谷通票 118 天际的海浪 99 cpp_learner 910 我不喜欢这个世界 9 加急问题 100 unity 设置Animation的culling type 导致游戏崩溃 75 数据库只有myd文件没有frm,myi文件，怎么打开呢 55 微服务框架，springboot启动异常 51 利用Adams联合matlab仿真求运动学反解问题 50 labview使用datasocket与c/c#程序的通信 50 已知地图GPS坐标点A和坐标点B，获取A点往B点直线走一定距离的坐标点经纬度？ 50 在不import任何东西并且限制交换次数的情况下做HeapSort和MergeSort？