nz-form使用实例(ngModel、ngModelChange)

<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)] 配合使用