New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ng-invalid class is being added when required is set to false or null #5527

Closed
williamdstuart opened this Issue Dec 1, 2015 · 7 comments

Comments

Projects
None yet
7 participants
@williamdstuart

williamdstuart commented Dec 1, 2015

When binding the required DOM property of an input element, the ng-invalid class is always added.

<input type="text" [required]="false" #x [(ng-model)]="title"></input>{{ x.required + "-" + x.className }}

<input type="text" [required]="true" #y [(ng-model)]="title"></input>{{ y.required + "-" + y.className }}
@greg-md

This comment has been minimized.

Show comment
Hide comment
@greg-md

greg-md Jan 13, 2016

In beta.1 remains the same problem!

If element is not required, or checkbox is not selected, you get invalid in ngForm.

greg-md commented Jan 13, 2016

In beta.1 remains the same problem!

If element is not required, or checkbox is not selected, you get invalid in ngForm.

@slintes

This comment has been minimized.

Show comment
Hide comment
@slintes

slintes Feb 16, 2016

Hi, I have the same problem, I'm setting required and readonly based on a checkbox value, see this example:

http://plnkr.co/edit/XM8QTwkr3B4nzc40gEpx?p=preview

slintes commented Feb 16, 2016

Hi, I have the same problem, I'm setting required and readonly based on a checkbox value, see this example:

http://plnkr.co/edit/XM8QTwkr3B4nzc40gEpx?p=preview

@zoechi

This comment has been minimized.

Show comment
Hide comment
@zoechi

zoechi Feb 17, 2016

Contributor

Boolean properties are only removed on null, not on false

[required]="truthy ? true : null" (where `true` is any value other than `null`/`undefined`)
Contributor

zoechi commented Feb 17, 2016

Boolean properties are only removed on null, not on false

[required]="truthy ? true : null" (where `true` is any value other than `null`/`undefined`)
@williamdstuart

This comment has been minimized.

Show comment
Hide comment
@williamdstuart

williamdstuart Mar 16, 2016

@zoechi I tried both of the statements below, and the ng-invalid class is still added.

<input type="text" [required]="null" #x [(ngModel)]="title" />{{ x.required + "-" + x.className }}

<input type="text" [required]="1 === 2 ? true : null" #x [(ngModel)]="title" />{{ x.required + "-" + x.className }}

williamdstuart commented Mar 16, 2016

@zoechi I tried both of the statements below, and the ng-invalid class is still added.

<input type="text" [required]="null" #x [(ngModel)]="title" />{{ x.required + "-" + x.className }}

<input type="text" [required]="1 === 2 ? true : null" #x [(ngModel)]="title" />{{ x.required + "-" + x.className }}

@williamdstuart williamdstuart changed the title from ng-invalid class is being added when required is set to false to ng-invalid class is being added when required is set to false or null Mar 16, 2016

@Celebes

This comment has been minimized.

Show comment
Hide comment
@Celebes

Celebes Apr 19, 2016

I have the same problem, I defined conditional required attribute in input: [required]="isRequired ? 'true' : null". Not setting isRequired makes required attribute not present, but css class ng-invalid is still added.

Celebes commented Apr 19, 2016

I have the same problem, I defined conditional required attribute in input: [required]="isRequired ? 'true' : null". Not setting isRequired makes required attribute not present, but css class ng-invalid is still added.

@johannesjo

This comment has been minimized.

Show comment
Hide comment
@johannesjo

johannesjo Aug 18, 2016

This is probably related: The ng-valid-required class is applied initially when using ng-required.

See:
http://plnkr.co/edit/nqPhJkmag3AQdntFRbEN?p=preview
johannesjo/ng-fab-form#90

johannesjo commented Aug 18, 2016

This is probably related: The ng-valid-required class is applied initially when using ng-required.

See:
http://plnkr.co/edit/nqPhJkmag3AQdntFRbEN?p=preview
johannesjo/ng-fab-form#90

@pkozlowski-opensource

This comment has been minimized.

Show comment
Hide comment
@pkozlowski-opensource

pkozlowski-opensource Aug 31, 2016

Member

This should be fixed by 0b665c0

Member

pkozlowski-opensource commented Aug 31, 2016

This should be fixed by 0b665c0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment