feat(module:form): support hide the label colon (#3136)

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

@@ -59,6 +59,7 @@ import { NzFormModule } from 'ng-zorro-antd';
 | Property | Description | Type | Default Value |
 | -------- | ----------- | ---- | ------------- |
 | `[nzLayout]`| Form layout | `'horizontal'｜'vertical'｜'inline'` | `'horizontal'` |
+| `[nzNoColon]`| change default props `[nzNoColon]` value of `nz-form-label` | `boolean` | `false` |
 
 
 ### nz-form-item
@@ -80,6 +81,7 @@ The label of the form item, optional.
 | Property | Description | Type | Default Value |
 | --- | --- | --- | --- |
 | `[nzRequired]`| add required style to current item | `boolean` | `false` |
+| `[nzNoColon]`| whether to not display `:` after label text. | `boolean` | `false` |
 | `[nzFor]`| The `for` property of `label` | `string` | - |
 | `[nzColon]` | Used with `label`, whether to display `:` after label text. | `boolean` | `true` |
 

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

@@ -57,6 +57,7 @@ import { NzFormModule } from 'ng-zorro-antd';
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzLayout]`| 表单布局 | `'horizontal'｜'vertical'｜'inline'` | `'horizontal'` |
+| `[nzNoColon]`| 配置 `nz-form-label` 的 `[nzNoColon]` 的默认值 | `boolean` | `false` |
 
 ### nz-form-item
 
@@ -77,6 +78,7 @@ import { NzFormModule } from 'ng-zorro-antd';
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzRequired]`| 当前项是否为必填，仅影响样式 | `boolean` | `false` |
+| `[nzNoColon]`| 是否不显示 label 后面的冒号 | `boolean` | `false` |
 | `[nzFor]`| label 标签的 for 属性	 | `string` | - |
 | `[nzColon]` | 配合 label 属性使用，表示是否显示 label 后面的冒号 | `boolean` | `true` |
 

components/form/nz-form-item.component.ts

@@ -9,14 +9,16 @@ import {
   ElementRef,
   Input,
   NgZone,
+  OnChanges,
   OnDestroy,
   QueryList,
   Renderer2,
+  SimpleChanges,
   ViewEncapsulation
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 
-import { toBoolean, NzUpdateHostClassService } from 'ng-zorro-antd/core';
+import { InputBoolean, NzUpdateHostClassService } from 'ng-zorro-antd/core';
 import { NzRowDirective } from 'ng-zorro-antd/grid';
 
 import { NzFormExplainComponent } from './nz-form-explain.component';
@@ -31,7 +33,7 @@ import { NzFormExplainComponent } from './nz-form-explain.component';
   providers: [NzUpdateHostClassService],
   templateUrl: './nz-form-item.component.html',
   host: {
-    '[class.ant-form-item-with-help]': 'listOfNzFormExplainComponent && (listOfNzFormExplainComponent.length>0)'
+    '[class.ant-form-item-with-help]': 'listOfNzFormExplainComponent && (listOfNzFormExplainComponent.length > 0)'
   },
   styles: [
     `
@@ -41,21 +43,11 @@ import { NzFormExplainComponent } from './nz-form-explain.component';
     `
   ]
 })
-export class NzFormItemComponent extends NzRowDirective implements AfterContentInit, OnDestroy {
-  private _flex = false;
-  @ContentChildren(NzFormExplainComponent, { descendants: true }) listOfNzFormExplainComponent: QueryList<
-    NzFormExplainComponent
-  >;
+export class NzFormItemComponent extends NzRowDirective implements AfterContentInit, OnDestroy, OnChanges {
+  @Input() @InputBoolean() nzFlex: boolean = false;
 
-  @Input()
-  set nzFlex(value: boolean) {
-    this._flex = toBoolean(value);
-    if (this._flex) {
-      this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'flex');
-    } else {
-      this.renderer.removeStyle(this.elementRef.nativeElement, 'display');
-    }
-  }
+  @ContentChildren(NzFormExplainComponent, { descendants: true })
+  listOfNzFormExplainComponent: QueryList<NzFormExplainComponent>;
 
   constructor(
     elementRef: ElementRef,
@@ -77,4 +69,16 @@ export class NzFormItemComponent extends NzRowDirective implements AfterContentI
       });
     }
   }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    super.ngOnChanges(changes);
+    if (changes.hasOwnProperty('nzFlex')) {
+      const flex = changes.nzFlex.currentValue;
+      if (flex) {
+        this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'flex');
+      } else {
+        this.renderer.removeStyle(this.elementRef.nativeElement, 'display');
+      }
+    }
+  }
 }

components/form/nz-form-label.component.html

@@ -1,3 +1,5 @@
-<label [attr.for]="nzFor" [class.ant-form-item-required]="nzRequired" [class.ant-form-item-no-colon]="!nzColon">
+<label [attr.for]="nzFor"
+  [class.ant-form-item-no-colon]="noColon === 'default' ? defaultNoColon : nzNoColon"
+  [class.ant-form-item-required]="nzRequired">
   <ng-content></ng-content>
 </label>

components/form/nz-form-label.component.ts

@@ -1,6 +1,7 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   Host,
@@ -11,7 +12,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { InputBoolean, NzUpdateHostClassService } from 'ng-zorro-antd/core';
+import { toBoolean, InputBoolean, NzUpdateHostClassService } from 'ng-zorro-antd/core';
 import { NzColDirective, NzRowDirective } from 'ng-zorro-antd/grid';
 
 import { NzFormItemComponent } from './nz-form-item.component';
@@ -28,19 +29,34 @@ import { NzFormItemComponent } from './nz-form-item.component';
 export class NzFormLabelComponent extends NzColDirective implements OnDestroy, AfterViewInit {
   @Input() nzFor: string;
   @Input() @InputBoolean() nzRequired = false;
-  @Input() @InputBoolean() nzColon = true;
+  @Input()
+  set nzNoColon(value: boolean) {
+    this.noColon = toBoolean(value);
+  }
+  get nzNoColon(): boolean {
+    return !!this.noColon;
+  }
+
+  defaultNoColon: boolean = false;
+  noColon: boolean | string = 'default';
 
   constructor(
     nzUpdateHostClassService: NzUpdateHostClassService,
     elementRef: ElementRef,
     @Optional() @Host() nzFormItemComponent: NzFormItemComponent,
     @Optional() @Host() nzRowDirective: NzRowDirective,
-    renderer: Renderer2
+    renderer: Renderer2,
+    private cdr: ChangeDetectorRef
   ) {
     super(nzUpdateHostClassService, elementRef, nzFormItemComponent || nzRowDirective, renderer);
     renderer.addClass(elementRef.nativeElement, 'ant-form-item-label');
   }
 
+  setDefaultNoColon(value: boolean): void {
+    this.defaultNoColon = toBoolean(value);
+    this.cdr.markForCheck();
+  }
+
   ngOnDestroy(): void {
     super.ngOnDestroy();
   }

components/form/nz-form-label.spec.ts

@@ -37,15 +37,24 @@ describe('nz-form-label', () => {
       fixture.detectChanges();
       expect(label.nativeElement.querySelector('label').classList).toContain('ant-form-item-required');
     });
+
+    it('should no colon work', () => {
+      fixture.detectChanges();
+      expect(label.nativeElement.querySelector('label').classList).not.toContain('ant-form-item-no-colon');
+      testComponent.noColon = true;
+      fixture.detectChanges();
+      expect(label.nativeElement.querySelector('label').classList).toContain('ant-form-item-no-colon');
+    });
   });
 });
 
 @Component({
   template: `
-    <nz-form-label [nzFor]="forValue" [nzRequired]="required"></nz-form-label>
+    <nz-form-label [nzFor]="forValue" [nzNoColon]="noColon" [nzRequired]="required"></nz-form-label>
   `
 })
 export class NzTestFormLabelComponent {
   forValue = 'test';
   required = false;
+  noColon = false;
 }

components/form/nz-form.directive.ts

@@ -1,20 +1,48 @@
-import { Directive, ElementRef, Input, OnChanges, OnInit, Renderer2 } from '@angular/core';
-import { NzUpdateHostClassService } from 'ng-zorro-antd/core';
+import {
+  AfterContentInit,
+  ContentChildren,
+  Directive,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  QueryList,
+  Renderer2,
+  SimpleChanges
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import { startWith, takeUntil } from 'rxjs/operators';
+
+import { InputBoolean, NzUpdateHostClassService } from 'ng-zorro-antd/core';
+
+import { NzFormLabelComponent } from './nz-form-label.component';
 
 @Directive({
   selector: '[nz-form]',
   exportAs: 'nzForm',
   providers: [NzUpdateHostClassService]
 })
-export class NzFormDirective implements OnInit, OnChanges {
+export class NzFormDirective implements OnInit, OnChanges, AfterContentInit, OnDestroy {
   @Input() nzLayout = 'horizontal';
+  @Input() @InputBoolean() nzNoColon: boolean = false;
+
+  @ContentChildren(NzFormLabelComponent, { descendants: true }) nzFormLabelComponent: QueryList<NzFormLabelComponent>;
+
+  destroy$ = new Subject();
 
   setClassMap(): void {
     this.nzUpdateHostClassService.updateHostClass(this.elementRef.nativeElement, {
       [`ant-form-${this.nzLayout}`]: this.nzLayout
     });
   }
 
+  updateItemsDefaultColon(): void {
+    if (this.nzFormLabelComponent) {
+      this.nzFormLabelComponent.forEach(item => item.setDefaultNoColon(this.nzNoColon));
+    }
+  }
+
   constructor(
     private elementRef: ElementRef,
     private renderer: Renderer2,
@@ -27,7 +55,26 @@ export class NzFormDirective implements OnInit, OnChanges {
     this.setClassMap();
   }
 
-  ngOnChanges(): void {
+  ngOnChanges(changes: SimpleChanges): void {
     this.setClassMap();
+    if (changes.hasOwnProperty('nzNoColon')) {
+      this.updateItemsDefaultColon();
+    }
+  }
+
+  ngAfterContentInit(): void {
+    this.nzFormLabelComponent.changes
+    .pipe(
+      startWith(null),
+      takeUntil(this.destroy$)
+    )
+    .subscribe(() => {
+      this.updateItemsDefaultColon();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }

components/form/nz-form.spec.ts

@@ -2,13 +2,21 @@ import { Component, DebugElement } from '@angular/core';
 import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NzFormItemComponent } from './nz-form-item.component';
+import { NzFormLabelComponent } from './nz-form-label.component';
 import { NzFormDirective } from './nz-form.directive';
 
 describe('nz-form', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
-      declarations: [NzFormDirective, NzTestFormDirectiveComponent]
+      declarations: [
+        NzFormDirective,
+        NzFormLabelComponent,
+        NzFormItemComponent,
+        NzTestFormDirectiveComponent,
+        NzTestFormLabelIntegrateComponent
+      ]
     });
     TestBed.compileComponents();
   }));
@@ -40,6 +48,67 @@ describe('nz-form', () => {
       expect(form.nativeElement.classList).toContain('ant-form-inline');
     });
   });
+
+  describe('label integrate', () => {
+    let fixture: ComponentFixture<NzTestFormLabelIntegrateComponent>;
+    let testComponent: NzTestFormLabelIntegrateComponent;
+    let form: DebugElement;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestFormLabelIntegrateComponent);
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+      form = fixture.debugElement.query(By.directive(NzFormDirective));
+    });
+
+    afterEach(() => {
+      testComponent.defaultNoColon = false;
+      testComponent.noColon = false;
+      testComponent.testPriority = false;
+      fixture.detectChanges();
+    });
+
+    it('should set default `NoColon` value', () => {
+      fixture.detectChanges();
+      const labels = (form.nativeElement as HTMLElement).querySelectorAll<HTMLLabelElement>(
+        '.ant-form-item-label label'
+      );
+      labels.forEach(label => expect(label.classList).not.toContain('ant-form-item-no-colon'));
+      testComponent.defaultNoColon = true;
+      fixture.detectChanges();
+      labels.forEach(label => expect(label.classList).toContain('ant-form-item-no-colon'));
+    });
+
+    it('should label have high priority', () => {
+      fixture.detectChanges();
+      const labels = (form.nativeElement as HTMLElement).querySelectorAll<HTMLLabelElement>(
+        '.ant-form-item-label label'
+      );
+      labels.forEach(label => expect(label.classList).not.toContain('ant-form-item-no-colon'));
+      testComponent.defaultNoColon = true;
+      fixture.detectChanges();
+      labels.forEach(label => expect(label.classList).toContain('ant-form-item-no-colon'));
+      testComponent.testPriority = true;
+      fixture.detectChanges();
+      labels.forEach(label => expect(label.classList).toContain('ant-form-item-no-colon'));
+      labels.forEach(label => {
+        if (label.innerText === 'TEST_PRIORITY') {
+          expect(label.classList).not.toContain('ant-form-item-no-colon');
+        } else {
+          expect(label.classList).toContain('ant-form-item-no-colon');
+        }
+      });
+      testComponent.defaultNoColon = false;
+      testComponent.noColon = true;
+      fixture.detectChanges();
+      labels.forEach(label => {
+        if (label.innerText === 'TEST_PRIORITY') {
+          expect(label.classList).toContain('ant-form-item-no-colon');
+        } else {
+          expect(label.classList).not.toContain('ant-form-item-no-colon');
+        }
+      });
+    });
+  });
 });
 
 @Component({
@@ -50,3 +119,24 @@ describe('nz-form', () => {
 export class NzTestFormDirectiveComponent {
   layout = 'horizontal';
 }
+
+@Component({
+  template: `
+    <form nz-form [nzNoColon]="defaultNoColon">
+      <nz-form-item>
+        <nz-form-label>Label</nz-form-label>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label>Label</nz-form-label>
+      </nz-form-item>
+      <nz-form-item *ngIf="testPriority">
+        <nz-form-label [nzNoColon]="noColon">TEST_PRIORITY</nz-form-label>
+      </nz-form-item>
+    </form>
+  `
+})
+export class NzTestFormLabelIntegrateComponent {
+  defaultNoColon = false;
+  testPriority = false;
+  noColon = false;
+}