Ng-zorro-antd: 优化 nz-form-item 使用方式，减少重复 template 代码

[danranVm]

What problem does this feature solve?

目前的 nz-form-item 使用起来会有很多重复的 template 代码，例如：

<nz-form-item>
  <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
  <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid E-mail!">
    <input nz-input formControlName="email" id="email" />
  </nz-form-control>
</nz-form-item>
<nz-form-item>
  <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>Password</nz-form-label>
  <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input your password!">
    <input nz-input type="password" id="password" formControlName="password" (ngModelChange)="updateConfirmValidator()" />
  </nz-form-control>
</nz-form-item>

在一般场景下，nz-form-label 和 nz-form-control 除了 content 内容外，其他代码都是固定的，期望可以简化这些固定而重复的代码。

What does the proposed API look like?

html <nz-form-item nzLabel="E-mail" nzRequired nzFor="email" nzErrorTip="The input is not valid E-mail!"> <input nz-input formControlName="email" id="email" /> </nz-form-item> <nz-form-item nzLabel="Password" nzRequired nzFor="password" nzErrorTip="Please input your password!"> <input nz-input type="password" id="password" formControlName="password" (ngModelChange)="updateConfirmValidator()" /> </nz-form-item>

[zorro-bot[bot]]

Translation of this issue:

Optimize NZ-FORM-ITEM to reduce Template code

What proBLEES THIS Feature SOLVE?

Current `NZ-Form-Items. There will be a lot of repetition Template code, for example:

`HTML <nz-form-item> <NZ-FORM-Label [NZSM] = "6" [NZXS] = "24" NZREQUIRED NZFOR = "email"> E-mail </ nz-form-label> <NZ-FORM-Control [NZSM] = "14" [NZXS] = "24" NZERRORTIP = "The Input is Not Valid E-mail!"> <Input NZ-Input FormControlName = "email" id = "email" /> </ NZ-FORM-Control> </ NZ-FORM-ITEM> <nz-form-item> <nz-form-label [nzsm] = "6" [nzxs] = "24" nzfor = "password" NzRequired> Password </ nz-form-label> <NZ-FORM-Control [NZSM] = "14" [NZXS] = "24" NZERRORTIP = "Please Input Your Password!"> <input nz-input type = "password" id = "password" formControlName = "password" = "UpdateConfirmvalidator ()" /> </ NZ-FORM-Control> </ NZ-FORM-ITEM> `

In general scenes, NZ-FORM-Label andNZ-Form-Control In addition to Content content, other code is fixed, it is desirable to simplify these fixed and repeated code.

What does The proposed API Look Like?

`HTML <nz-form-item nzlabel = "e-mail" nzrequired nzfor = "email" nzerrortip = "The Input is not valid e-mail!"> <Input NZ-Input FormControlName = "email" id = "email" /> </ NZ-FORM-ITEM> <nz-form-item nzlabel = "password" nzrequired nzFor = "password" NZERRORTIP = "Please Input your password!"> <input nz-input type = "password" id = "password" formControlName = "password" = "UpdateConfirmvalidator ()" /> </ NZ-FORM-ITEM> `

[danranVm]

关联 #5642

额外会添加一个 API ：nzSimpleMode 用于判断是否开启 简易模式

@vthinkxie 这相当于要把 nz-form-label 和 nz-form-control 的所有 API 都在 nz-form-item 中支持一遍, 你有什么好的建议么？

[vthinkxie]

两个建议

1. 如果发现内部没有 nz-form-label 和 nz-form-control 自动开启 simple 模式，selector 保持使用 nz-form-item
2. 或者 新增一个 nz-simple-form-item 方法，其他用法和目前一样

[danranVm]

额外新增一个组件，我感觉不太好。
我尝试一下你的第一个建议，不过我想增加 nzSimpleMode 的想法是：

• 我们第一个版本可以默认不开启，但是推荐使用 simple 模式
• 下个版本可以默认开启 simple 模式
• 再然后，我觉得甚至可以把 nz-form-label 和 nz-form-control 不暴露给用户，只在内部使用。

@vthinkxie

[vthinkxie]

<nz-form-label> 和 <nz-form-control> 还是会有大量独立的场景的，

比如需要按照 span 和 col 划分的时候，或者需要在label中大量增加template 的时候，举个栗子

https://realtime-compute.console.aliyun.com/#/sell/managed/ack/advanced

[ousc]

我觉得可以考虑ng-alain里的se

[wxpxzdj]

确实有这种需求，公司的后台系统基本上90%以上都不需要特殊调整。
然后自己封装了一个：