Ng-zorro-antd: [RFC] Make all boolean attribute `false` by default
I'm submitting a...
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
Content
It's much easier and instinctive to specify an attribute for applying it (rather than strip it).
Consider:
<!-- truthy -->
<nz-cascader></nz-cascader>
<!-- falsy -->
<nz-cascader [nzShowInput]="false" [nzShowArrow]="false"></nz-cascader>
Versus:
<!-- truthy -->
<nz-cascader></nz-cascader>
<!-- falsy -->
<nz-cascader [nzNoInput]="true" [nzNoArrow]="true"></nz-cascader>
The latter can then be simplified to:
<!-- truthy -->
<nz-cascader></nz-cascader>
<!-- falsy -->
<nz-cascader nzNoInput nzNoArrow></nz-cascader>
This way we could keep consistency with HTML boolean attributes, and the value part could always be omitted while remain effective.
It can make non-binding usage much simpler. For binding usage, just need to add or remove an ! operator.
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
Angular version: X.Y.Z
ng-zorro-antd version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
trotyl
All 14 comments
这种用法会混淆 Directive 和 Input，感觉用起来怪怪的。
ghost
on 20 Oct 2017
@ghost Haven't you used disabled on <input>? This is the suggested way in most React libs (including antd) and Angular libs (including this one), just trying to make it applicable for more components.
trotyl
on 20 Oct 2017
@trotyl what if user want to dynamic change the attribute
vthinkxie
on 21 Oct 2017
@vthinkxie Will keep the same behavior as input[disabled], namely:
<input disabled>
<nz-cascader nzNoInput nzNoArrow></nz-cascader>
Are used for static mockup, while:
<input [disabled]="condition">
<nz-cascader [nzNoInput]="condition" [nzNoArrow]="condition"></nz-cascader>
Applies to dynamic binding.
The only change is that if user writes condition before, they need to use !condition now, and vice versa.
Currently if some user want to use only static markup, they still need to manually binds to a false value, like:
<nz-cascader [nzShowInput]="false" [nzShowArrow]="false"></nz-cascader>
That's too much boilerplate.
trotyl
on 21 Oct 2017
@trotyl
Some components are designed as your description already, but change all boolean attribute false by default will bring some break changes, would you please figure out these changes?
vthinkxie
on 21 Oct 2017
@vthinkxie I'll have a thorough check.
trotyl
on 21 Oct 2017
Boolean inputs with true by default (so must have a value):
NzCalendarComponent#nzClearTimeNzCalendarComponent#nzFullScreenNzCalendarComponent#nzShowHeaderNzCardComponent#nzBorderedNzCarouselComponent#nzDotsNzCascaderComponent#nzShowInputNzCascaderComponent#nzAllowClearNzCascaderComponent#nzShowArrowNzCascaderComponent#nzEnableCacheNzConfirmComponent#nzMaskClosableNzDatePickerComponent#nzAllowClearNzDropDownComponent#nzClickHideNzDropDownButtonComponent#nzClickHideNzMenuComponent#nzClickActiveNzModalComponent#nzClosableNzModalComponent#nzMaskClosableNzProgressComponent#nzShowInfoNzSelectComponent#nzFilterNzSliderComponent#nzIncludedNzSpinComponent#nzSpinningNzTabsNavComponent#nzAnimatedNzTabsNavComponent#nzShowPaginationNzTabSetComponent#nzAnimatedNzTabSetComponent#nzShowPagination
Boolean inputs with false by default (but not support no value):
NzAlertComponent#nzBannerNzAlertComponent#nzCloseableNzAlertComponent#nzShowIconNzBadgeComponent#nzDotNzButtonComponent#nzGhostNzButtonComponent#nzLoadingNzCalendarComponent#nzDatePickerNzCardComponent#nzLoadingNzCardComponent#nzNoHoveringNzCarouselComponent#nzAutoPlayNzCarouselComponent#nzVerticalNzCascaderComponent#nzDisabledNzCascaderComponent#nzShowSearchNzCascaderComponent#nzChangeOnSelectNzCheckboxGroupComponent#nzDisabledNzCheckboxGroupComponent#nzIndeterminateNzCollapseComponent#nzDisabledNzCollapseComponent#nzActiveNzConfirmComponent#nzVisibleNzConfirmComponent#nzConfirmLoadingNzDropDownButtonComponent#nzDisableNzDropDownButtonComponent#nzVisibleNzDropDownComponent#nzVisibleNzModalComponent#nzVisibleNzModalComponent#nzConfirmLoadingNzMenuItemComponent#nzDisableNzMenuItemComponent#nzSelectedNzMenuComponent#nzInlineCollapsedNzOptionComponent#nzDisabledNzPopconfirmComponent#nzConditionNzRadioButtonComponent#nzDisabledNzRadioComponent#nzCheckedNzRadioComponent#nzDisabledNzRateComponent#nzDisabledNzRowExpandIconComponent#nzExpandNzRowExpandIconComponent#nzShowExpandNzSelectComponent#nzShowSearchNzSelectComponent#nzDisabledNzSelectComponent#nzOpenNzSiderComponent#nzCollapsedNzSliderMarksComponent#nzVerticalNzSliderMarksComponent#nzIncludedNzSliderStepComponent#nzVerticalNzSliderStepComponent#nzIncludedNzSliderTrackComponent#nzVerticalNzSliderTrackComponent#nzIncludedNzSliderComponent#nzDisabledNzSliderComponent#nzDotsNzStepsComponent#nzProgressDotNzSubMenuComponent#nzOpenNzSwitchComponent#nzDisabledNzTableComponent#nzBorderedNzTableComponent#nzCustomNoResultNzTableComponent#nzLoadingNzTableComponent#nzShowSizeChangerNzTableComponent#nzShowQuickJumperNzTableComponent#nzShowTotalNzTableComponent#nzShowFooterNzTableComponent#nzShowTitleNzTdDirective#nzCheckboxNzTdDirective#nzExpandNzThDirective#nzCheckboxNzThDirective#nzExpandNzTabLabelDirective#disabledNzTabsInkBarDirective#nzAnimatedNzTabsNavComponent#nzHideBarNzTabSetComponent#nzHideNzCheckableTagComponent#nzCheckedNzCheckableTagComponent#nzClosableNzTagComponent#nzClosableNzTimePickerInnerComponent#nzDisabledNzTimePickerComponent#nzDisabled
Boolean inputs already supports no value truthy:
NzBadgeComponent#nzShowZeroNzFormControlComponent#nzHasFeedbackNzSiderComponent#nzCollapsibleNzPaginationComponent#nzShowSizeChangerNzPaginationComponent#nzShowQuickJumperNzPaginationComponent#nzShowTotalNzPaginationComponent#nzSimpleNzRateComponent#nzAllowHalfNzSelectComponent#nzAllowClearNzSelectComponent#nzKeepUnListOptionsNzSliderComponent#nzVerticalNzTableComponent#nzIsPaginationNzTableComponent#nzIsPageIndexResetNzTimePickerInnerComponent#nzHideDisabledOptions
trotyl
on 23 Oct 2017
@trotyl
it seems that many break changes will happened if make all boolean attribute false by default
what about make all boolean inputs with false by default support no value truthy first
and the bring the break change in the further version such as 0.6.x or 0.7.x
vthinkxie
on 23 Oct 2017
Actually we don't need to remove the old ones (in near future), it's easy to provide different getter/setter with the same internal.
trotyl
on 23 Oct 2017
@trotyl
that is ok, we can give a warning or something before we remove the old ones.
vthinkxie
on 23 Oct 2017
Waiting for https://github.com/angular/angular/issues/19929.
Update: since no quick response there, will use NgModel#disabled implementation for reference.
trotyl
on 25 Oct 2017
import { toBoolean } from '../util/convert';
Maybe much better in this way:
import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
cipchk
on 18 Dec 2017
@cipchk Agree with that.
trotyl
on 18 Dec 2017
done with @InputBoolean in the latest version.
vthinkxie
on 19 Feb 2019
Related issues
ismezy
·
3Comments
lsbbd
·
3Comments
JCqiu
·
3Comments
bambooj
·
4Comments
cipchk
·
4Comments
Most helpful comment
@ghost Haven't you used
disabledon<input>? This is the suggested way in most React libs (including antd) and Angular libs (including this one), just trying to make it applicable for more components.