fix(angular): null values are not converted to falsy value (#26341)

BREAKING CHANGE:

Datetime:

Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.

Angular:

`null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
This commit is contained in:
Liam DeBeasi
2022-11-23 13:03:13 -05:00
committed by GitHub
parent 1e855e7699
commit ce2e37b1a1
6 changed files with 21 additions and 16 deletions

View File

@@ -19,7 +19,7 @@ export class BooleanValueAccessorDirective extends ValueAccessor {
}
writeValue(value: any): void {
this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
this.el.nativeElement.checked = this.lastValue = value;
setIonicClasses(this.el);
}

View File

@@ -18,14 +18,7 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
constructor(protected injector: Injector, protected el: ElementRef) {}
writeValue(value: any): void {
/**
* TODO FW-2646
* Change `value == null ? '' : value;`
* to `value`. This was a fix for IE9, but IE9
* is no longer supported; however, this change
* is potentially a breaking change
*/
this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
this.el.nativeElement.value = this.lastValue = value;
setIonicClasses(this.el);
}

View File

@@ -16,9 +16,15 @@ describe('Inputs', () => {
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', false);
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', false);
cy.get('ion-input').should('have.prop', 'value').and('equal', '');
cy.get('ion-datetime').should('have.prop', 'value').and('equal', '');
cy.get('ion-select').should('have.prop', 'value').and('equal', '');
/**
* The `value` property gets set to undefined
* for these components, so we need to check
* not.have.prop which will check that the
* value property is undefined.
*/
cy.get('ion-input').should('not.have.prop', 'value');
cy.get('ion-datetime').should('not.have.prop', 'value');
cy.get('ion-select').should('not.have.prop', 'value');
});
it('should get some value', () => {