form nzHasFeedback 组件兼容设计

[simplejason]

背景

simplejason:
现在 form hasFeedback 开启后，对于 input 等组件，实际渲染的 dom 是在用户的 input 元素外面加了个 wrapper 结构，对于 select 反而是复用了其下拉 icon 的 dom 结构来渲染，这种设计为什么没有统一按照一种方式设计呢？
豆酱:
Input 的 Wrapper 是因为 Input 本身是一个简单组件，它的样式不需要额外包裹用户就可以直接 ref 操作 dom or className or style 修改样式。但是一些复合场景例如 suffix preffix allowClear 等等，势必需要做 wrapper 添加额外元素。目前的处理就是简单 Input 简单来，不到不得已不包。Form 的 feedback 只是 Input 应用 wrapper 的又一个 case 而已。

DEMO: https://ant.design/components/form-cn/#components-form-demo-validate-static

在先前版本中，Form 为了实现 feedback 会做非常多的样式魔改。对 select 做个偏移，对 datePicker 加个 padding 等等。这让 Form 在 status 样式下和子组件耦合度非常高。所以之后改成了 FormItem 告诉你状态，子组件决定是否要采用。这样对于 Form 而言不用耦合样式，对于三方组件而言也可以通过 context 实现自己的 status 拓展。

ant-design 的 form 表单将 status 和 hasFeedback 下移到组件内部，让子组件根据 form 的状态自动更新 error warning success 对应的状态和 feedback 图标。
但是 input/input-number/mention 这类简单结构（无后缀元素）就得根据 feedback 字段返回不同的 dom 结构，对于当前 ng-zorro-antd 的使用方式和实现方式都有不同程度影响，在此希望大家讨论下最优的方案。

举例

ant-design:
input-number: https://github.com/ant-design/ant-design/blob/master/components/input-number/index.tsx#L101
input: https://github.com/ant-design/ant-design/blob/master/components/input/Input.tsx#L153

// 用户使用
<Form.Item
  label="Username"
  name="username"
  rules={[{ required: true, message: 'Please input your username!' }]}
>
  <Input />
</Form.Item>

// input 实际渲染，在 input 基础上多了 ant-xxx-affix-wrapper 与 ant-xxx-suffix 结构（input/input-number/mention三者结构一致）
<span class="ant-input-affix-wrapper ant-input-affix-wrapper-status-validating ant-input-affix-wrapper-has-feedback">
  <input class="ant-input" type="text" />
  <span class="ant-input-suffix">
    <span class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating">
      <span
        role="img"
        aria-label="loading"
        class="anticon anticon-loading anticon-spin"
      >
      </span>
    </span>
  </span>
</span>

在 ng-zorro 中实现

方案 1：

提供 nz-form-feedback 组件，在需要包裹的组件上使用

<nz-form-control  nzHasFeedback>
  <nz-form-feedback>
    <input nz-input />
  </nz-form-feedback>
</nz-form-control>

弊端：需要用户修改原始代码，且需要在 nz-form-feedback 内部判断组件类型，决定 class 的前缀 ，如 ant-input ant-mentions ...

方案 2：

针对相关组件提供 nz-xxx-group 组件，如已有的 nz-input-group，可实现组件前缀后缀的同时复用这个结构实现 feedback 能力，但是要求用户在 form 中使用时只能通过 nz-xxx-group 形式才能支持 feedback icon 能力

<nz-form-control  nzHasFeedback>
  <nz-input-group>
    <input nz-input />
  </nz-form-feedback>
</nz-form-control>

<nz-form-control  nzHasFeedback>
  <nz-input-number-group>
    <nz-input-number></nz-input-number>
  </nz-form-feedback>
</nz-form-control>

<nz-form-control  nzHasFeedback>
  <nz-mention-group>
    <nz-mention></nz-mention>
  </nz-form-feedback>
</nz-form-control>

方案 3：

在组件内部根据 feedback 属性动态渲染不同的 dom 结构，但是对于 nz-input 指令型目前不支持。

<ng-container *ngIf="feedback"></ng-container>
<ng-container *ngIf="!feedback"></ng-container>

弊端：原来绑定在 host 上的 class 就不能直接绑定了，此时 nz-xxx 组件基本就只能当成一个 element tag

讨论待办 TODO

todo

[danranVm]

我个人倾向于方案2，
然后我过了一遍所有的表单输入组件，应该就只有 input 和 input-number 有这个问题，
其他的组件例如：select, date-picker 自己就带了后缀图标，我们可以简单修改一下渲染逻辑就好了。
还有部分组件例如： checkbox, radio, switch, 这种组件理论上应该不用支持 feedback？

[simplejason]

最终采用了另一种方式，对于 input-number 支持类似 nz-input-group 方式，同时在 nz-input-number/nz-input-group 上增加一个 xxxService，addon 下的子组件通过 @Optional() xxxService 来决定是否渲染状态。同时在 nz-form-control 增加另一个 service 来下发状态变更事件。具体参考代码：
https://github.com/NG-ZORRO/ng-zorro-antd/tree/master/components/core/form