fix(form): fix missing error style (#1537)

Author: cipchk

CHANGELOG.md

@@ -1,4 +1,4 @@
-## [14.1.0](https://github.com/ng-alain/delon/compare/14.0.0...14.0.1) (2022-10-09)
+## [14.1.0](https://github.com/ng-alain/delon/compare/14.0.0...14.1.0) (2022-10-09)
 
 
 ### Bug Fixes

packages/form/spec/form.spec.ts

@@ -527,12 +527,8 @@ describe('form: component', () => {
         const namePath = '/name';
         context.comp.updateFeedback(namePath, 'error');
         page.dc().checkCount('.ant-form-item-has-error', 1).checkCount('.ant-form-item-has-feedback', 1);
-        context.comp.updateFeedback(namePath, 'success', 'left');
-        page
-          .dc()
-          .checkCount('.ant-form-item-has-success', 1)
-          .checkCount('.ant-form-item-has-feedback', 1)
-          .checkCount('.anticon-left', 1);
+        context.comp.updateFeedback(namePath, 'success');
+        page.dc().checkCount('.ant-form-item-has-success', 1).checkCount('.ant-form-item-has-feedback', 1);
         context.comp.updateFeedback(namePath);
 
         page.dc().checkCount('.ant-form-item-has-feedback', 0);

packages/form/src/errors.ts

@@ -110,5 +110,8 @@ export interface ErrorSchema {
    */
   feedback?: NzFormControlStatusType;
 
+  /**
+   * @deprecated Will be removed of NG-ZORRO don't support
+   */
   feedbackIcon?: string | null;
 }

packages/form/src/model/form.property.ts

@@ -1,6 +1,7 @@
 import { BehaviorSubject, combineLatest, Observable, distinctUntilChanged, map } from 'rxjs';
 
 import { AlainSFConfig } from '@delon/util/config';
+import { NzFormStatusService } from 'ng-zorro-antd/core/form';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import type { NzFormControlStatusType } from 'ng-zorro-antd/form';
 
@@ -373,17 +374,9 @@ export abstract class FormProperty {
 
   // #endregion
 
-  updateFeedback(status: NzFormControlStatusType = '', icon?: string | null): void {
+  updateFeedback(status: NzFormControlStatusType = ''): void {
     this.ui.feedback = status;
-    this.ui.feedbackIcon =
-      icon ||
-      {
-        '': '',
-        error: 'close-circle-fill',
-        validating: 'loading',
-        success: 'check-circle-fill',
-        warning: 'exclamation-circle-fill'
-      }[status];
+    this.widget.injector.get(NzFormStatusService).formStatusChanges.next({ status, hasFeedback: !!status });
     this.widget.detectChanges();
   }
 }

packages/form/src/sf-item-wrap.component.html

@@ -35,9 +35,6 @@
       <div class="ant-form-item-control-input-content">
         <ng-content></ng-content>
       </div>
-      <span class="ant-form-item-children-icon">
-        <i *ngIf="ui.feedbackIcon" nz-icon [nzType]="ui.feedbackIcon"></i>
-      </span>
     </div>
     <div *ngIf="!ui.onlyVisual && showError" @helpMotion class="ant-form-item-explain ant-form-item-explain-connected">
       <div role="alert" class="ant-form-item-explain-error">

packages/form/src/sf-item-wrap.component.ts

@@ -1,6 +1,7 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core';
 
 import { helpMotion } from 'ng-zorro-antd/core/animation';
+import { NzFormStatusService } from 'ng-zorro-antd/core/form';
 
 import type { SFSchema } from './schema/index';
 import type { SFOptionalHelp, SFUISchemaItem } from './schema/ui';
@@ -12,7 +13,7 @@ import type { SFOptionalHelp, SFUISchemaItem } from './schema/ui';
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
-export class SFItemWrapComponent {
+export class SFItemWrapComponent implements OnChanges {
   _showTitle: boolean = false;
   @Input() id?: string;
   @Input() schema!: SFSchema;
@@ -32,4 +33,11 @@ export class SFItemWrapComponent {
   get oh(): SFOptionalHelp {
     return this.ui.optionalHelp as SFOptionalHelp;
   }
+
+  constructor(private statusSrv: NzFormStatusService) {}
+
+  ngOnChanges(): void {
+    const hasError = !!this.error;
+    this.statusSrv.formStatusChanges.next({ status: hasError ? 'error' : '', hasFeedback: hasError });
+  }
 }

packages/form/src/sf-item.component.ts

@@ -12,6 +12,8 @@ import {
 } from '@angular/core';
 import { Subject } from 'rxjs';
 
+import { NzFormStatusService } from 'ng-zorro-antd/core/form';
+
 import { FormProperty } from './model/form.property';
 import { SFUISchemaItem } from './schema/ui';
 import { TerminatorService } from './terminator.service';
@@ -29,7 +31,8 @@ let nextUniqueId = 0;
     <ng-container *ngTemplateOutlet="footer"></ng-container>
   `,
   preserveWhitespaces: false,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [NzFormStatusService]
 })
 export class SFItemComponent implements OnInit, OnChanges, OnDestroy {
   private ref!: ComponentRef<Widget<FormProperty, SFUISchemaItem>>;

packages/form/src/sf.component.ts

@@ -236,8 +236,8 @@ export class SFComponent implements OnInit, OnChanges, OnDestroy {
    * this.sf.updateFeedback('/name');
    * ```
    */
-  updateFeedback(path: string, status: NzFormControlStatusType = '', icon?: string | null): this {
-    this.getProperty(path)?.updateFeedback(status, icon);
+  updateFeedback(path: string, status: NzFormControlStatusType = ''): this {
+    this.getProperty(path)?.updateFeedback(status);
     return this;
   }