feat(module:form): support form label align (#7870)

Author: TheBeard30

components/form/demo/label-align.md

@@ -0,0 +1,14 @@
+---
+order: 15
+title:
+  zh-CN: 表单标签文本对齐方式
+  en-US: Text align of form label
+---
+
+## zh-CN
+
+表单标签文本对齐方式。
+
+## en-US
+
+text align of form label.

components/form/demo/label-align.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'nz-demo-form-label-align',
+  template: `
+    <form nz-form [formGroup]="validateForm">
+      <nz-form-item>
+        <nz-form-label nzRequired nzLabelAlign="left" nzSpan="4">Left-aligned text label</nz-form-label>
+        <nz-form-control nzErrorTip="Please input your username!" nzSpan="8">
+          <input formControlName="userName" nz-input placeholder="Username" />
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label nzRequired nzLabelAlign="right" nzSpan="4">Right-aligned text label</nz-form-label>
+        <nz-form-control nzErrorTip="Please input your Password!" nzSpan="8">
+          <input formControlName="password" nz-input type="password" placeholder="Password" />
+        </nz-form-control>
+      </nz-form-item>
+    </form>
+  `
+})
+export class NzDemoFormLabelAlignComponent 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

@@ -58,6 +58,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 | `[nzDisableAutoTips]`| Set default props `[nzDisableAutoTip]` value of `nz-form-control` | `boolean` | `false` | ✅ |
 | `[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'` |
 
 ### nz-form-item
 
@@ -78,6 +79,8 @@ The label of the form item, optional.
 | `[nzFor]`| The `for` property of `label` | `string` | - |
 | `[nzTooltipTitle]`| Set tooltip info | `string \| TemplateRef<void>` | - |
 | `[nzTooltipIcon]`| Set icon of tooltip info | `string \| NzFormTooltipIcon` | - |
+| `[nzLabelAlign]`| The text align of label | `'left' \| 'right'` | `'right'` |
+
 
 ### nz-form-control
 > Note：Due to the lack of partial Observable in [Angular Form](https://github.com/angular/angular/issues/10887), you have to notify `nz-form-control` to update its status with `updateValueAndValidity` when you update form status using methods like `markAsDirty`.

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

@@ -58,6 +58,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 | `[nzDisableAutoTips]`| 配置 `nz-form-control` 的 `[nzDisableAutoTips]` 的默认值 | `boolean` | `false` | ✅ |
 | `[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'` |
 
 ### nz-form-item
 
@@ -78,6 +79,8 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 | `[nzFor]`| label 标签的 for 属性	 | `string` | - |
 | `[nzTooltipTitle]`| 配置提示信息 | `string \| TemplateRef<void>` | - |
 | `[nzTooltipIcon]`| 配置提示信息的图标 | `string \| NzFormTooltipIcon` | - |
+| `[nzLabelAlign]`| 标签文本对齐方式 | `'left' \| 'right'` | `'right'` |
+
 
 ### nz-form-control
 

components/form/form-label.component.ts

@@ -23,7 +23,7 @@ import { ThemeType } from '@ant-design/icons-angular';
 import { BooleanInput, NzTSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean, toBoolean } from 'ng-zorro-antd/core/util';
 
-import { DefaultTooltipIcon, NzFormDirective } from './form.directive';
+import { DefaultTooltipIcon, NzFormDirective, NzLabelAlignType } from './form.directive';
 
 export interface NzFormTooltipIcon {
   type: NzTSType;
@@ -50,7 +50,10 @@ function toTooltipIcon(value: string | NzFormTooltipIcon): Required<NzFormToolti
         </ng-container>
       </span>
     </label>
-  `
+  `,
+  host: {
+    '[class.ant-form-item-label-left]': `nzLabelAlign === 'left'`
+  }
 })
 export class NzFormLabelComponent implements OnDestroy {
   static ngAcceptInputType_nzRequired: BooleanInput;
@@ -81,6 +84,17 @@ export class NzFormLabelComponent implements OnDestroy {
   }
   private _tooltipIcon: NzFormTooltipIcon | 'default' = 'default';
 
+  @Input()
+  set nzLabelAlign(value: NzLabelAlignType) {
+    this.labelAlign = value;
+  }
+
+  get nzLabelAlign(): NzLabelAlignType {
+    return this.labelAlign !== 'default' ? this.labelAlign : this.nzFormDirective?.nzLabelAlign || 'right';
+  }
+
+  private labelAlign: NzLabelAlignType | 'default' = 'default';
+
   private destroy$ = new Subject();
 
   constructor(
@@ -107,6 +121,14 @@ export class NzFormLabelComponent implements OnDestroy {
           takeUntil(this.destroy$)
         )
         .subscribe(() => this.cdr.markForCheck());
+
+      this.nzFormDirective
+        .getInputObservable('nzLabelAlign')
+        .pipe(
+          filter(() => this.labelAlign === 'default'),
+          takeUntil(this.destroy$)
+        )
+        .subscribe(() => this.cdr.markForCheck());
     }
   }
 

components/form/form-label.spec.ts

@@ -59,6 +59,15 @@ describe('nz-form-label', () => {
       expect(label.nativeElement.querySelector('.ant-form-item-tooltip')).toBeDefined();
       expect(label.nativeElement.querySelector('.anticon-info-circle')).toBeDefined();
     });
+    it('should label align work', () => {
+      expect(label.nativeElement.classList).not.toContain('ant-form-item-label-left');
+
+      testComponent.align = 'left';
+
+      testBed.fixture.detectChanges();
+
+      expect(label.nativeElement.classList).toContain('ant-form-item-label-left');
+    });
   });
 });
 
@@ -70,6 +79,7 @@ describe('nz-form-label', () => {
       [nzRequired]="required"
       [nzTooltipTitle]="tooltipTitle"
       [nzTooltipIcon]="tooltipIcon"
+      [nzLabelAlign]="align"
     ></nz-form-label>
   `
 })
@@ -79,4 +89,5 @@ export class NzTestFormLabelComponent {
   noColon = false;
   tooltipTitle?: string;
   tooltipIcon?: string | NzFormTooltipIcon;
+  align = 'right';
 }

components/form/form.directive.ts

@@ -28,6 +28,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'form';
 
 export type NzFormLayoutType = 'horizontal' | 'vertical' | 'inline';
 
+export type NzLabelAlignType = 'left' | 'right';
+
 export const DefaultTooltipIcon = {
   type: 'question-circle',
   theme: 'outline'
@@ -53,6 +55,7 @@ export class NzFormDirective implements OnChanges, OnDestroy, InputObservable {
   @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';
 
   dir: Direction = 'ltr';
   destroy$ = new Subject();