Angular ng-zorro-antd 表单 nz-select 打乱布局
- 我的
Angular
项目中使用了ng-zorro-antd
的UI组件 - 制作表单时出现个情况,使用
input
布局没问题的,其中一个更换为nz-select
布局就乱了 全部使用
input
的代码如下:(看“客户”要素)<nz-form-item > <nz-form-label [nzSpan]="7">单据日期</nz-form-label> <nz-form-control [nzSpan]="17" nzErrorTip="必填项"> <nz-date-picker formControlName="billdate" placeholder="单据日期" (ngModelChange)="onChangeBilldate($event)"></nz-date-picker> </nz-form-control> </nz-form-item> <nz-form-item > <nz-form-label [nzSpan]="7">交期</nz-form-label> <nz-form-control [nzSpan]="17" nzErrorTip="必填项"> <nz-date-picker formControlName="deliverytime" placeholder="交期" (ngModelChange)="onChangeDeliverytime($event)"></nz-date-picker> </nz-form-control> </nz-form-item> <nz-form-item > <nz-form-label [nzSpan]="7">客户</nz-form-label> <nz-form-control [nzSpan]="17"> <input nz-input formControlName="clientid" placeholder="客户" /> <!-- <nz-select formControlName="clientid" placeholder="客户"> <nz-option nzValue="Option 1" nzLabel="Option 1"></nz-option> <nz-option nzValue="Option 2" nzLabel="Option 2"></nz-option> </nz-select> --> </nz-form-control> </nz-form-item>
- 效果如下:
将“客户”要素更换为
nz-select
布局就乱了,代码如下:(看“客户”要素)<nz-form-item > <nz-form-label [nzSpan]="7">单据日期</nz-form-label> <nz-form-control [nzSpan]="17" nzErrorTip="必填项"> <nz-date-picker formControlName="billdate" placeholder="单据日期" (ngModelChange)="onChangeBilldate($event)"></nz-date-picker> </nz-form-control> </nz-form-item> <nz-form-item > <nz-form-label [nzSpan]="7">交期</nz-form-label> <nz-form-control [nzSpan]="17" nzErrorTip="必填项"> <nz-date-picker formControlName="deliverytime" placeholder="交期" (ngModelChange)="onChangeDeliverytime($event)"></nz-date-picker> </nz-form-control> </nz-form-item> <nz-form-item > <nz-form-label [nzSpan]="7">客户</nz-form-label> <nz-form-control [nzSpan]="17"> <!-- <input nz-input formControlName="clientid" placeholder="客户" /> --> <nz-select formControlName="clientid" placeholder="客户"> <nz-option nzValue="Option 1" nzLabel="Option 1"></nz-option> <nz-option nzValue="Option 2" nzLabel="Option 2"></nz-option> </nz-select> </nz-form-control> </nz-form-item>
- 使用
nz-select
的效果如下: - 有必要的话:QQ = 409223171
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论