Input is not marked as invalid

[wnvko]

Description

Describe the issue.

• igniteui-angular version: ~18.1.0
• browser: all

Steps to reproduce

Create reactive form like this:

export interface MyClass{
  name: FormControl<string | null>,
}
public myForm: FormGroup<MyClass>;
constructor(
    private aBNorthwindService: ABNorthwindService,
) {
    this.myForm = new FormGroup<MyClass>({
      name: new FormControl<string | null>('', Validators.required),
   });
}

<form [formGroup]="myForm">
    <igx-input-group type="border">
      <input type="text" formControlName="name" igxInput />
      <label igxLabel>Name</label>
    </igx-input-group>
</form>

Run the application. Click in the input and click outside the input.

Result

Input does not paint in red - it is not invalidated.

Expected result

Input should be painted in red showing it is invalid.

Note

On second click the input paints in red and is correctly shown as invalid. Also, if the input is not part of reactive form binding it is working correctly.

[jackofdiamond5]

Since the outlined problem here comes from the CG - the problem is not with the input directive but with the generation. The current generation outputs this for NGM:

And this for SA:

It seems to me that because Angular will attempt to resolve the imports in order of occurrence, if the IgxInputGroupModule / IGX_INPUT_GROUP_DIRECTIVES is placed before the FormsModule / ReactiveFormsModule then they will get resolved first and they will not have access to the fully resolved FormsModule & ReactiveFormsModule. Even though later the latter get resolved this still to messes up the NgControl as it is initially incapable of updating its touched state, which in turn causes the problem outlined in the issue.

The fix here is rather straightforward - always import the FormsModule & ReactiveFormsModule before any of our components, modules or directives.

[pmoleri]

@jackofdiamond5 I'm not convinced about this part "Angular will attempt to resolve the imports in order of occurrence".

The workaround is useful but I think that we should dig more to understand the actual cause of the issue and see if we can prevent it in the first place.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.