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

danranVm commented 3 years ago

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?


<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>
```<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->

zorro-bot[bot] commented 3 years ago

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

E-mail

Password

`` ` In general scenes, `NZ-FORM-Label` and` NZ-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

`` `

danranVm commented 3 years ago

关联 #5642

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

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

vthinkxie commented 3 years ago

两个建议

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

danranVm commented 3 years ago

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

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

@vthinkxie

vthinkxie commented 3 years ago

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

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

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

ousc commented 3 years ago

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

wxpxzdj commented 3 years ago

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

danranVm commented 3 years ago

@vthinkxie

nz-form

新增 nzLabelCol, nzControlCol 两个配置项, 用于统一设置 nz-form-item 的 nzLabelCol, nzControlCol
- 类型为 number | object, number 默认对应 nz-col组件的 span 配置
新增 nzLabelAlign 配置项，用于统一设置 nz-form-item 的 nzLabelAlign

nz-form-item

新增 nzLabelCol, nzControlCol 两个配置项, 分别设置 nz-form-label 和 nz-form-control 的 nz-col 的配置
新增 nzLabel 配置项, 也就是 nz-form-label 的 content.
新增 nzLabelAlign 配置项，标签文本对齐方式
新增 nz-form-label 的所有配置
新增 nz-form-control 的所有配置
- 我想把那几个 tip (nzSuccessTip, nzWarningTip, nzErrorTip, nzValidatingTip) 合并成一个，你赞成不？

当设置了 labelCol 或者 controlCol 的时候，启用简洁模式。（如果发现内部没有 nz-form-label 和 nz-form-control 自动开启 simple 模式），这种方式应该会多执行一次变更检测，因为需要在内部手动调用一次 markforcheck 吧？

使用示例如下：

<form nz-form nzLabelCol="8" nzControlCol="8">
  <nz-form-item nzLabel="Username"  nzRequired  >
     <input nz-input formControlName="username" />
  </nz-form-item>
  <nz-form-item nzLabel="Password"  nzRequired >
    <input nz-input type="password"  formControlName="password" /> 
  </nz-form-item>
  <nz-form-item nzLabel="E-mail"  nzRequired >
    <input nz-input  formControlName="email" /> 
  </nz-form-item>
  </form>

更多示例可以看我现在写的那个 vue3 组件库的demo: https://idux.site/components/form/zh

vthinkxie commented 3 years ago

@danranVm 抱歉回复的比较晚，我觉得没有啥问题，要不提个PR看看

NG-ZORRO / ng-zorro-antd