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

[tkiryu]

Description

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

Steps to reproduce

1. Go to https://stackblitz.com/edit/igx-editors-v5-2-1 (using igx-form-group class)
2. Click "SUBMIT" button
3. Go to https://stackblitz.com/edit/igx-editors-issue (using igx-input-group component)
4. Click "SUBMIT" button

Result

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.

[simeonoff]

@tkiryu sorry, I can't open the samples.

[tkiryu]

@simeonoff , 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.

[DDavidkov]

@tkiryu 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:

if (!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.

[tkiryu]

@DDavidkov ,

I understand why we need to call updateValueAndValidity. Thank you for your great work!
d56386b#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.

[DDavidkov]

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

[tkiryu]

@DDavidkov What I was concerned about was resolved by your additional commit. Thank you so much!
b0cf011#diff-6f41a12bd84d5e6d3bad3cad109e10c3R81

[ghost]

Has this required workaround been put in public docs?

@kdinev

[kdinev]

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

[ghost]

@tkiryu do you have a working project you can share?

[ghost]

@tkiryu 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

[tkiryu]

@kdawg1406 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

[ghost]

@tkiryu 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.