refactor(module:form): refactor control flow component (#8340)

NG-ZORRO · Jan 10, 2024 · f4d3ba7 · f4d3ba7
1 parent a95195f
commit f4d3ba7
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 79 deletions.
diff --git a/components/form/demo/advanced-search.ts b/components/form/demo/advanced-search.ts
@@ -6,19 +6,21 @@ import { FormControl, FormRecord, NonNullableFormBuilder } from '@angular/forms'
   template: `
     <form nz-form [formGroup]="validateForm" class="ant-advanced-search-form">
       <div nz-row [nzGutter]="24">
-        <div nz-col [nzSpan]="8" *ngFor="let control of controlArray" [hidden]="!control.show">
-          <nz-form-item>
-            <nz-form-label [nzFor]="'field' + control.index">Field {{ control.index }}</nz-form-label>
-            <nz-form-control>
-              <input
-                nz-input
-                placeholder="placeholder"
-                [formControlName]="'field' + control.index"
-                [attr.id]="'field' + control.index"
-              />
-            </nz-form-control>
-          </nz-form-item>
-        </div>
+        @for (control of controlArray; track control) {
+          <div nz-col [nzSpan]="8" [hidden]="!control.show">
+            <nz-form-item>
+              <nz-form-label [nzFor]="'field' + control.index">Field {{ control.index }}</nz-form-label>
+              <nz-form-control>
+                <input
+                  nz-input
+                  placeholder="placeholder"
+                  [formControlName]="'field' + control.index"
+                  [attr.id]="'field' + control.index"
+                />
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+        }
       </div>
       <div nz-row>
         <div nz-col [nzSpan]="24" class="search-area">

diff --git a/components/form/demo/auto-tips.ts b/components/form/demo/auto-tips.ts
@@ -45,8 +45,12 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
         <nz-form-control [nzSpan]="12" nzDisableAutoTips [nzErrorTip]="passwordErrorTpl">
           <input nz-input type="password" formControlName="confirm" placeholder="confirm your password" />
           <ng-template #passwordErrorTpl let-control>
-            <ng-container *ngIf="control.hasError('required')">Please confirm your password!</ng-container>
-            <ng-container *ngIf="control.hasError('confirm')">Password is inconsistent!</ng-container>
+            @if (control.errors?.['required']) {
+              Please confirm your password!
+            }
+            @if (control.errors?.['confirm']) {
+              Password is inconsistent!
+            }
           </ng-template>
         </nz-form-control>
       </nz-form-item>

diff --git a/components/form/demo/dynamic-form-item.ts b/components/form/demo/dynamic-form-item.ts
@@ -5,31 +5,34 @@ import { FormControl, FormRecord, NonNullableFormBuilder, Validators } from '@an
   selector: 'nz-demo-form-dynamic-form-item',
   template: `
     <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
-      <nz-form-item *ngFor="let control of listOfControl; let i = index">
-        <nz-form-label [nzXs]="24" [nzSm]="4" *ngIf="i === 0" [nzFor]="control.controlInstance">
-          Passengers
-        </nz-form-label>
-        <nz-form-control
-          [nzXs]="24"
-          [nzSm]="20"
-          [nzOffset]="i === 0 ? 0 : 4"
-          nzErrorTip="Please input passenger's name or delete this field."
-        >
-          <input
-            class="passenger-input"
-            nz-input
-            placeholder="placeholder"
-            [attr.id]="control.id"
-            [formControlName]="control.controlInstance"
-          />
-          <span
-            nz-icon
-            nzType="minus-circle-o"
-            class="dynamic-delete-button"
-            (click)="removeField(control, $event)"
-          ></span>
-        </nz-form-control>
-      </nz-form-item>
+      @for (control of listOfControl; track control; let i = $index) {
+        <nz-form-item>
+          @if (i === 0) {
+            <nz-form-label [nzXs]="24" [nzSm]="4" [nzFor]="control.controlInstance"> Passengers </nz-form-label>
+          }
+          <nz-form-control
+            [nzXs]="24"
+            [nzSm]="20"
+            [nzOffset]="i === 0 ? 0 : 4"
+            nzErrorTip="Please input passenger's name or delete this field."
+          >
+            <input
+              class="passenger-input"
+              nz-input
+              placeholder="placeholder"
+              [attr.id]="control.id"
+              [formControlName]="control.controlInstance"
+            />
+            <span
+              nz-icon
+              nzType="minus-circle-o"
+              class="dynamic-delete-button"
+              (click)="removeField(control, $event)"
+            ></span>
+          </nz-form-control>
+        </nz-form-item>
+      }
+
       <nz-form-item>
         <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 20, offset: 4 }">
           <button nz-button nzType="dashed" class="add-button" (click)="addField($event)">

diff --git a/components/form/demo/register.ts b/components/form/demo/register.ts
@@ -37,10 +37,12 @@ import { NzFormTooltipIcon } from 'ng-zorro-antd/form';
         <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="errorTpl">
           <input nz-input type="password" formControlName="checkPassword" id="checkPassword" />
           <ng-template #errorTpl let-control>
-            <ng-container *ngIf="control.hasError('required')">Please confirm your password!</ng-container>
-            <ng-container *ngIf="control.hasError('confirm')">
+            @if (control.errors?.['required']) {
+              Please confirm your password!
+            }
+            @if (control.errors?.['confirm']) {
               Two passwords that you enter is inconsistent!
-            </ng-container>
+            }
           </ng-template>
         </nz-form-control>
       </nz-form-item>

diff --git a/components/form/demo/validate-reactive.ts b/components/form/demo/validate-reactive.ts
@@ -20,8 +20,12 @@ import { Observable, Observer } from 'rxjs';
         <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="userErrorTpl">
           <input nz-input formControlName="userName" placeholder="async validate try to write JasonWood" />
           <ng-template #userErrorTpl let-control>
-            <ng-container *ngIf="control.hasError('required')">Please input your username!</ng-container>
-            <ng-container *ngIf="control.hasError('duplicated')">The username is redundant!</ng-container>
+            @if (control.errors?.['required']) {
+              Please input your username!
+            }
+            @if (control.errors?.['duplicated']) {
+              The username is redundant!
+            }
           </ng-template>
         </nz-form-control>
       </nz-form-item>
@@ -30,8 +34,12 @@ import { Observable, Observer } from 'rxjs';
         <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
           <input nz-input formControlName="email" placeholder="email" type="email" />
           <ng-template #emailErrorTpl let-control>
-            <ng-container *ngIf="control.hasError('email')">The input is not valid E-mail!</ng-container>
-            <ng-container *ngIf="control.hasError('required')">Please input your E-mail!</ng-container>
+            @if (control.errors?.['email']) {
+              The input is not valid E-mail!
+            }
+            @if (control.errors?.['required']) {
+              Please input your E-mail!
+            }
           </ng-template>
         </nz-form-control>
       </nz-form-item>
@@ -46,8 +54,12 @@ import { Observable, Observer } from 'rxjs';
         <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="passwordErrorTpl">
           <input nz-input type="password" formControlName="confirm" placeholder="confirm your password" />
           <ng-template #passwordErrorTpl let-control>
-            <ng-container *ngIf="control.hasError('required')">Please confirm your password!</ng-container>
-            <ng-container *ngIf="control.hasError('confirm')">Password is inconsistent!</ng-container>
+            @if (control.errors?.['required']) {
+              Please confirm your password!
+            }
+            @if (control.errors?.['confirm']) {
+              Password is inconsistent!
+            }
           </ng-template>
         </nz-form-control>
       </nz-form-item>

diff --git a/components/form/demo/validate-template.ts b/components/form/demo/validate-template.ts
@@ -46,9 +46,15 @@ import { Component } from '@angular/core';
             required
           />
           <ng-template #combineTpl let-control>
-            <ng-container *ngIf="control.hasError('maxlength')">MaxLength is 12</ng-container>
-            <ng-container *ngIf="control.hasError('minlength')">MinLength is 6</ng-container>
-            <ng-container *ngIf="control.hasError('required')">Input is required</ng-container>
+            @if (control.errors?.['maxlength']) {
+              MaxLength is 12
+            }
+            @if (control.errors?.['minlength']) {
+              MinLength is 6
+            }
+            @if (control.errors?.['required']) {
+              Input is required
+            }
           </ng-template>
         </nz-form-control>
       </nz-form-item>

diff --git a/components/form/form-control.component.ts b/components/form/form-control.component.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -47,22 +47,27 @@ import { NzFormDirective } from './form.directive';
         <ng-content></ng-content>
       </div>
     </div>
-    <div @helpMotion class="ant-form-item-explain ant-form-item-explain-connected" *ngIf="innerTip">
-      <div role="alert" [ngClass]="['ant-form-item-explain-' + status]">
-        <ng-container *nzStringTemplateOutlet="innerTip; context: { $implicit: validateControl }">{{
-          innerTip
-        }}</ng-container>
+    @if (innerTip) {
+      <div @helpMotion class="ant-form-item-explain ant-form-item-explain-connected">
+        <div role="alert" [ngClass]="['ant-form-item-explain-' + status]">
+          <ng-container *nzStringTemplateOutlet="innerTip; context: { $implicit: validateControl }">{{
+            innerTip
+          }}</ng-container>
+        </div>
       </div>
-    </div>
-    <div class="ant-form-item-extra" *ngIf="nzExtra">
-      <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
-    </div>
+    }
+
+    @if (nzExtra) {
+      <div class="ant-form-item-extra">
+        <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+      </div>
+    }
   `,
   providers: [NzFormStatusService],
   host: {
     class: 'ant-form-item-control'
   },
-  imports: [NgClass, NzOutletModule, NgIf],
+  imports: [NgClass, NzOutletModule],
   standalone: true
 })
 export class NzFormControlComponent implements OnChanges, OnDestroy, OnInit, AfterContentInit, OnDestroy {

diff --git a/components/form/form-control.spec.ts b/components/form/form-control.spec.ts
@@ -16,7 +16,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ɵComponentBed as ComponentBed, ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core/testing';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
-import { NzI18nService, en_US } from 'ng-zorro-antd/i18n';
+import { en_US, NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { NzFormControlComponent } from './form-control.component';
 import { NzFormItemComponent } from './form-item.component';
@@ -452,11 +452,13 @@ export class NzTestReactiveFormControlInitStatusComponent {
           <input nz-input type="password" formControlName="password" />
         </nz-form-control>
       </nz-form-item>
-      <nz-form-item *ngIf="showConfirmPassword">
-        <nz-form-control>
-          <input nz-input type="password" formControlName="confirmPassword" />
-        </nz-form-control>
-      </nz-form-item>
+      @if (showConfirmPassword) {
+        <nz-form-item>
+          <nz-form-control>
+            <input nz-input type="password" formControlName="confirmPassword" />
+          </nz-form-control>
+        </nz-form-item>
+      }
     </form>
   `
 })

diff --git a/components/form/form-label.component.ts b/components/form/form-label.component.ts
@@ -3,7 +3,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -46,19 +45,21 @@ function toTooltipIcon(value: string | NzFormTooltipIcon): Required<NzFormToolti
   template: `
     <label [attr.for]="nzFor" [class.ant-form-item-no-colon]="nzNoColon" [class.ant-form-item-required]="nzRequired">
       <ng-content></ng-content>
-      <span *ngIf="nzTooltipTitle" class="ant-form-item-tooltip" nz-tooltip [nzTooltipTitle]="nzTooltipTitle">
-        <ng-container *nzStringTemplateOutlet="tooltipIcon.type; let tooltipIconType">
-          <span nz-icon [nzType]="tooltipIconType" [nzTheme]="tooltipIcon.theme"></span>
-        </ng-container>
-      </span>
+      @if (nzTooltipTitle) {
+        <span class="ant-form-item-tooltip" nz-tooltip [nzTooltipTitle]="nzTooltipTitle">
+          <ng-container *nzStringTemplateOutlet="tooltipIcon.type; let tooltipIconType">
+            <span nz-icon [nzType]="tooltipIconType" [nzTheme]="tooltipIcon.theme"></span>
+          </ng-container>
+        </span>
+      }
     </label>
   `,
   host: {
     class: 'ant-form-item-label',
     '[class.ant-form-item-label-left]': `nzLabelAlign === 'left'`,
     '[class.ant-form-item-label-wrap]': `nzLabelWrap`
   },
-  imports: [NgIf, NzOutletModule, NzTooltipDirective, NzIconModule],
+  imports: [NzOutletModule, NzTooltipDirective, NzIconModule],
   standalone: true
 })
 export class NzFormLabelComponent implements OnDestroy {

diff --git a/components/form/form.spec.ts b/components/form/form.spec.ts
@@ -129,9 +129,11 @@ export class NzTestFormDirectiveComponent {
       <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>
+      @if (testPriority) {
+        <nz-form-item>
+          <nz-form-label [nzNoColon]="noColon">TEST_PRIORITY</nz-form-label>
+        </nz-form-item>
+      }
     </form>
   `
 })