Skip to content

Bind Input [Group] validity directly to ngModel so it responds better to changes through API #6434

Closed
@damyanpetev

Description

@damyanpetev

Preface: The visual validity of a control (as displayed to the user) is a combination of the status and usually either dirty or touched, per Form Validation.

Is your request related to a problem? Please describe.

Updating FormControl properties such as touched/dirty through API (like you might to trigger manual form validation) won't reflect in the Input and Group state, despite causing other validation messages to be displayed.

Currently the validity of the igxInput (and thus the Input Group) is updated based on the AbstractControl.statusChanges. And blur. And focus.

if (this.ngControl) {
this._statusChanges$ = this.ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
}

However, this doesn't quite cover the condition for validity and there are no other events for changes in touched/dirty control state.

Describe alternatives you've considered

An additional call to updateValueAndValidity to ensure the event is emitted and the Input updates: #4756 (comment).

Describe the solution you'd like

While that's not a major issue, it'd be better if we do away with the subscription and directly bind the input validity and group styling to the ngModel properties.

Additional context

Because the initial value bind already determined the status, the ngModel control starts out as pristine and invalid and so igxInput.valid is IgxInputState.INITIAL.
At this point calling markAsTouched() or markAsDirty() technically completes the requirement for a visual error (and error messages do appear), but there's no statusChanges so the input state and group styling remain initial.

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions