<div class="Fill bottom-form-container">
<div nz-row nzGutter="35">
<div nz-col nzSpan="13">
<div class="common-card-container" id="Simulation-Details">
<div class="common-card-title">扫描申请单详情</div>
<div class="common-card-content">
<div nz-row nzGutter="15">
<div nz-col nzSpan="12">
<nz-form-item nzGutter="10">
<nz-form-label [nzSpan]="8" [nzRequired]="isNotAllowedNull(titleEnum)" nzNoColon>
申请单名称
</nz-form-label>
<nz-form-control [nzSpan]="16" nzErrorTip="必填项">
<input nz-input name="title" id="title" [required]="isNotAllowedNull(titleEnum)"
[(ngModel)]="simOrderDto.title" [disabled]="isSimulationConfirmDisabled()" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="12">
<nz-form-item nzGutter="10">
<nz-form-label [nzSpan]="8" [nzRequired]="isNotAllowedNull(diagnoseRelationsEnum)" nzNoColon>
关联诊断
</nz-form-label>
<nz-form-control [nzSpan]="16">
<nz-select [nzShowArrow]="true" [nzSuffixIcon]="selectIcon" [ngModel]="selectedDiagnose"
[required]="isNotAllowedNull(diagnoseRelationsEnum)"
(ngModelChange)="changeRelatedDiagnoseId($event)" nzMode="multiple"
nzDropdownClassName="multiple-dropdown-ul" name="relatedDiagnoseId" id="relatedDiagnoseId"
[nzDisabled]="isSimulationConfirmDisabled()">
<nz-option *ngFor="let item of selectData.relateDiagnosisList" [nzValue]="item"
[nzLabel]="item.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
</div>
在栅格布局中,常常需要和间隔进行配合,可以使用 nz-row 的 nzGutter 属性,我们推荐使用 (16+8n)px 作为栅格间隔。
对[(ngModel)]的理解:
有三种情况(ngModel)、[ngModel]、([ngModel])
以input框为例子:
1、<input type=‘text’ (ngModel)=‘username’ />
这种时候数据的传递方向是 input ----> 组件
一般使用单括号的绑定方式会出现在一些操作行为上
比如 <button (click)='buttonClick()'>点击</button> ———当button触发点击事件的时候调用组件的buttonClick()方法
2、<input type=‘text’ [ngModel]=‘username’ />
这种时候数据的传递方向是 组件 -----> input
这是单向绑定,就是说在组件中给username赋了值可以影响到input的值,但input的值发生改变的时候,不会影响组件中username的值
3、<input type=‘text’ ([ngModel])=‘username’ />
这种时候数据的传递方向是 组件 -----> input , input --------> 组件
这是双向绑定,就是说在组件中給username赋了值可以影响到input的值,并且input的值发生改变的时候组件中的username的值也会随之变化。
Input, Change, ngModelChange事件的区别
- Input: 输入字符时触发(不包含功能性按键, enter, control 等)
- Change: 失去焦点且当前的值跟上次触发的值不同 或者 enter键被触发且当前的值跟上次触发的值不同
- ngModelChange: 它的触发条件和input事件的触发条件是一样的,只是它需要和 [(ngModel)] 配合使用