feat(module:form): support form label wrap (#7892)

Author: TheBeard30

components/form/demo/label-wrap.md

@@ -0,0 +1,14 @@
+---
+order: 14
+title:
+  zh-CN: 表单标签可换行
+  en-US: Label can wrap
+---
+
+## zh-CN
+
+使用 `nzLabelWrap` 可以开启 `label` 换行。
+
+## en-US
+
+Turn on `nzLabelWrap` to wrap label if text is long.

components/form/demo/label-wrap.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'nz-demo-form-label-wrap',
+  template: `
+    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+      <nz-form-item>
+        <nz-form-label nzRequired nzFor="user" nzSpan="3"> Normal text label </nz-form-label>
+        <nz-form-control nzErrorTip="Please input your username!" nzSpan="8">
+          <input formControlName="userName" nz-input id="user" />
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label nzRequired nzFor="password" nzSpan="3" nzLabelWrap>
+          Long text label Long text label
+        </nz-form-label>
+        <nz-form-control nzErrorTip="Please input your Password!" nzSpan="8">
+          <input formControlName="password" nz-input type="password" id="password" />
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-control nzSpan="12" style="text-align: center">
+          <button nz-button nzType="primary">Log in</button>
+        </nz-form-control>
+      </nz-form-item>
+    </form>
+  `
+})
+export class NzDemoFormLabelWrapComponent implements OnInit {
+  validateForm!: UntypedFormGroup;
+
+  submitForm(): void {
+    console.log('submit', this.validateForm.value);
+  }
+
+  constructor(private fb: UntypedFormBuilder) {}
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      userName: [null, [Validators.required]],
+      password: [null, [Validators.required]],
+      remember: [true]
+    });
+  }
+}

components/form/doc/index.en-US.md

@@ -59,6 +59,8 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 | `[nzNoColon]`| Set default props `[nzNoColon]` value of `nz-form-label` | `boolean` | `false` | ✅ |
 | `[nzTooltipIcon]`| Set default props `[nzTooltipIcon]` value of `nz-form-label` | `string \| { type: string; theme: ThemeType }` | `{ type: 'question-circle', theme: 'outline' }` | ✅ |
 | `[nzLabelAlign]`| Set default props `[nzLabelAlign]` value of `nz-form-label` | `'left' \| 'right'` | `'right'` |
+| `[nzLabelWrap]`| Set default props `[nzLabelWrap]` value of `nz-form-label` | `boolean` | `false` |
+
 
 ### nz-form-item
 
@@ -80,6 +82,7 @@ The label of the form item, optional.
 | `[nzTooltipTitle]`| Set tooltip info | `string \| TemplateRef<void>` | - |
 | `[nzTooltipIcon]`| Set icon of tooltip info | `string \| NzFormTooltipIcon` | - |
 | `[nzLabelAlign]`| The text align of label | `'left' \| 'right'` | `'right'` |
+| `[nzLabelWrap]`| whether label can be wrap | `boolean` | `false` |
 
 
 ### nz-form-control

components/form/doc/index.zh-CN.md

@@ -59,6 +59,8 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 | `[nzNoColon]`| 配置 `nz-form-label` 的 `[nzNoColon]` 的默认值 | `boolean` | `false` | ✅ |
 | `[nzTooltipIcon]`| 配置 `nz-form-label` 的 `[nzTooltipIcon]` 的默认值 | `string \| { type: string; theme: ThemeType }` | `{ type: 'question-circle', theme: 'outline' }` | ✅ |
 | `[nzLabelAlign]`| 配置 `nz-form-label` 的 `[nzLabelAlign]` 的默认值 | `'left' \| 'right'` | `'right'` |
+| `[nzLabelWrap]`| 配置 `nz-form-label` 的 `[nzLabelWrap]` 的默认值 | `boolean` | `false` |
+
 
 ### nz-form-item
 
@@ -80,7 +82,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 | `[nzTooltipTitle]`| 配置提示信息 | `string \| TemplateRef<void>` | - |
 | `[nzTooltipIcon]`| 配置提示信息的图标 | `string \| NzFormTooltipIcon` | - |
 | `[nzLabelAlign]`| 标签文本对齐方式 | `'left' \| 'right'` | `'right'` |
-
+| `[nzLabelWrap]`| label 标签的文本换行方式 | `boolean` | `false` |
 
 ### nz-form-control
 

components/form/form-label.component.ts

@@ -51,12 +51,14 @@ function toTooltipIcon(value: string | NzFormTooltipIcon): Required<NzFormToolti
   `,
   host: {
     class: 'ant-form-item-label',
-    '[class.ant-form-item-label-left]': `nzLabelAlign === 'left'`
+    '[class.ant-form-item-label-left]': `nzLabelAlign === 'left'`,
+    '[class.ant-form-item-label-wrap]': `nzLabelWrap`
   }
 })
 export class NzFormLabelComponent implements OnDestroy {
   static ngAcceptInputType_nzRequired: BooleanInput;
   static ngAcceptInputType_nzNoColon: BooleanInput;
+  static ngAcceptInputType_nzLabelWrap: BooleanInput;
 
   @Input() nzFor?: string;
   @Input() @InputBoolean() nzRequired = false;
@@ -94,6 +96,17 @@ export class NzFormLabelComponent implements OnDestroy {
 
   private labelAlign: NzLabelAlignType | 'default' = 'default';
 
+  @Input()
+  set nzLabelWrap(value: boolean) {
+    this.labelWrap = toBoolean(value);
+  }
+
+  get nzLabelWrap(): boolean {
+    return this.labelWrap !== 'default' ? this.labelWrap : this.nzFormDirective?.nzLabelWrap;
+  }
+
+  private labelWrap: boolean | 'default' = 'default';
+
   private destroy$ = new Subject<boolean>();
 
   constructor(private cdr: ChangeDetectorRef, @Optional() @SkipSelf() private nzFormDirective: NzFormDirective) {
@@ -121,6 +134,14 @@ export class NzFormLabelComponent implements OnDestroy {
           takeUntil(this.destroy$)
         )
         .subscribe(() => this.cdr.markForCheck());
+
+      this.nzFormDirective
+        .getInputObservable('nzLabelWrap')
+        .pipe(
+          filter(() => this.labelWrap === 'default'),
+          takeUntil(this.destroy$)
+        )
+        .subscribe(() => this.cdr.markForCheck());
     }
   }
 

components/form/form-label.spec.ts

@@ -68,6 +68,15 @@ describe('nz-form-label', () => {
 
       expect(label.nativeElement.classList).toContain('ant-form-item-label-left');
     });
+
+    it('should label wrap work', () => {
+      expect(label.nativeElement.classList).not.toContain('ant-form-item-label-wrap');
+
+      testComponent.labelWrap = true;
+      testBed.fixture.detectChanges();
+
+      expect(label.nativeElement.classList).toContain('ant-form-item-label-wrap');
+    });
   });
 });
 
@@ -80,6 +89,7 @@ describe('nz-form-label', () => {
       [nzTooltipTitle]="tooltipTitle"
       [nzTooltipIcon]="tooltipIcon"
       [nzLabelAlign]="align"
+      [nzLabelWrap]="labelWrap"
     ></nz-form-label>
   `
 })
@@ -90,4 +100,5 @@ export class NzTestFormLabelComponent {
   tooltipTitle?: string;
   tooltipIcon?: string | NzFormTooltipIcon;
   align = 'right';
+  labelWrap = false;
 }

components/form/form.directive.ts

@@ -40,13 +40,15 @@ export class NzFormDirective implements OnChanges, OnDestroy, InputObservable {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   static ngAcceptInputType_nzNoColon: BooleanInput;
   static ngAcceptInputType_nzDisableAutoTips: BooleanInput;
+  static ngAcceptInputType_nzLabelWrap: BooleanInput;
 
   @Input() nzLayout: NzFormLayoutType = 'horizontal';
   @Input() @WithConfig() @InputBoolean() nzNoColon: boolean = false;
   @Input() @WithConfig() nzAutoTips: Record<string, Record<string, string>> = {};
   @Input() @InputBoolean() nzDisableAutoTips = false;
   @Input() @WithConfig() nzTooltipIcon: string | { type: string; theme: ThemeType } = DefaultTooltipIcon;
   @Input() nzLabelAlign: NzLabelAlignType = 'right';
+  @Input() @WithConfig() @InputBoolean() nzLabelWrap: boolean = false;
 
   dir: Direction = 'ltr';
   destroy$ = new Subject<boolean>();