- 我的
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