fix(module:cron-expression): exception error & cancel format prompt copy (#8114)

Author: OriginRing

components/cron-expression/cron-expression-label.component.ts

@@ -3,42 +3,27 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
 
 import { NzCronExpressionLabelI18n } from 'ng-zorro-antd/i18n';
 
-import { TimeType, TimeTypeError } from './typings';
+import { TimeType } from './typings';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-cron-expression-label',
   exportAs: 'nzCronExpressionLabel',
   template: `
-    <div
-      class="ant-cron-expression-label"
-      [class.ant-cron-expression-label-foucs]="labelFocus === type"
-      [class.ant-cron-expression-error]="!valid"
-    >
-      <label nz-tooltip [nzTooltipTitle]="error" [nzTooltipVisible]="!valid" nzTooltipPlacement="bottom">
+    <div class="ant-cron-expression-label" [class.ant-cron-expression-label-foucs]="labelFocus === type">
+      <label>
         {{ locale[type] }}
       </label>
     </div>
-    <ng-template #error>
-      <div class="ant-cron-expression-hint" [innerHTML]="locale[labelError]"></div>
-    </ng-template>
   `
 })
-export class NzCronExpressionLabelComponent implements OnInit {
+export class NzCronExpressionLabelComponent {
   @Input() type: TimeType = 'second';
-  @Input() valid: boolean = true;
   @Input() locale!: NzCronExpressionLabelI18n;
   @Input() labelFocus: string | null = null;
-  labelError: TimeTypeError = 'secondError';
-
-  constructor() {}
-
-  ngOnInit(): void {
-    this.labelError = `${this.type}Error`;
-  }
 }

components/cron-expression/cron-expression-preview.component.ts

@@ -32,22 +32,18 @@ import { NzCronExpressionCronErrorI18n } from 'ng-zorro-antd/i18n';
       </ng-container>
       <ng-template #cronError>{{ locale.cronError }}</ng-template>
     </div>
-    <div *ngIf="visible" class="ant-cron-expression-preview-content">
-      <div class="ant-cron-expression-preview-content-date">
-        <ng-container *ngIf="!isExpand">
-          <ul class="ant-cron-expression-preview-list">
-            <li *ngFor="let item of TimeList">
-              {{ item | date: 'YYYY-MM-dd HH:mm:ss' }}
-            </li>
-            <li><a (click)="loadMorePreview.emit()">···</a></li>
-          </ul>
-        </ng-container>
-      </div>
-      <ul class="ant-cron-expression-preview-icon">
-        <li *ngIf="isExpand"><span nz-icon nzType="down" nzTheme="outline" (click)="setExpand()"></span></li>
-        <li *ngIf="!isExpand"><span nz-icon nzType="up" nzTheme="outline" (click)="setExpand()"></span></li>
+    <div *ngIf="visible && !isExpand" class="ant-cron-expression-preview-content">
+      <ul class="ant-cron-expression-preview-list">
+        <li *ngFor="let item of TimeList">
+          {{ item | date: 'YYYY-MM-dd HH:mm:ss' }}
+        </li>
+        <li><a (click)="loadMorePreview.emit()">···</a></li>
       </ul>
     </div>
+    <ul class="ant-cron-expression-preview-icon">
+      <li *ngIf="isExpand"><span nz-icon nzType="down" nzTheme="outline" (click)="setExpand()"></span></li>
+      <li *ngIf="!isExpand"><span nz-icon nzType="up" nzTheme="outline" (click)="setExpand()"></span></li>
+    </ul>
   </div>`
 })
 export class NzCronExpressionPreviewComponent {

components/cron-expression/cron-expression.component.ts

@@ -19,14 +19,14 @@ import {
 import {
   AbstractControl,
   AsyncValidator,
-  AsyncValidatorFn,
   ControlValueAccessor,
   FormBuilder,
   FormControl,
   FormGroup,
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
+  ValidatorFn,
   Validators
 } from '@angular/forms';
 import { Observable, of } from 'rxjs';
@@ -86,7 +86,6 @@ function labelsOfType(type: NzCronExpressionType): TimeType[] {
           <ng-container *ngFor="let label of labels">
             <nz-cron-expression-label
               [type]="label"
-              [valid]="this.validateForm.controls[label].valid"
               [labelFocus]="labelFocus"
               [locale]="locale"
             ></nz-cron-expression-label>
@@ -135,7 +134,6 @@ export class NzCronExpressionComponent implements OnInit, OnChanges, ControlValu
   locale!: NzCronExpressionI18nInterface;
   focus: boolean = false;
   labelFocus: TimeType | null = null;
-  validLabel: string | null = null;
   labels: TimeType[] = labelsOfType(this.nzType);
   interval!: CronExpression<false>;
   nextTimeList: Date[] = [];
@@ -185,14 +183,17 @@ export class NzCronExpressionComponent implements OnInit, OnChanges, ControlValu
   }
 
   constructor(private formBuilder: FormBuilder, private cdr: ChangeDetectorRef, private i18n: NzI18nService) {
-    this.validateForm = this.formBuilder.nonNullable.group({
-      second: ['0', Validators.required, this.checkValid],
-      minute: ['*', Validators.required, this.checkValid],
-      hour: ['*', Validators.required, this.checkValid],
-      day: ['*', Validators.required, this.checkValid],
-      month: ['*', Validators.required, this.checkValid],
-      week: ['*', Validators.required, this.checkValid]
-    });
+    this.validateForm = this.formBuilder.nonNullable.group(
+      {
+        second: ['0', Validators.required],
+        minute: ['*', Validators.required],
+        hour: ['*', Validators.required],
+        day: ['*', Validators.required],
+        month: ['*', Validators.required],
+        week: ['*', Validators.required]
+      },
+      { validators: this.checkValid }
+    );
   }
 
   ngOnInit(): void {
@@ -264,23 +265,22 @@ export class NzCronExpressionComponent implements OnInit, OnChanges, ControlValu
   }
 
   getValue(item: CronChangeType): void {
-    this.validLabel = item.label;
     this.validateForm.controls[item.label].patchValue(item.value);
     this.cdr.markForCheck();
   }
 
-  checkValid: AsyncValidatorFn = (control: AbstractControl) => {
+  checkValid: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
     if (control.value) {
       try {
         const cron: string[] = [];
         this.labels.forEach(label => {
-          label === this.validLabel ? cron.push(control.value) : cron.push('*');
+          cron.push(control.value[label]);
         });
         parseExpression(cron.join(' '));
       } catch (err: unknown) {
-        return of({ error: true });
+        return { error: true };
       }
     }
-    return of(null);
+    return null;
   };
 }

components/cron-expression/doc/index.en-US.md

@@ -40,4 +40,20 @@ npm install cron-parser
 | `[nzSize]`   | The size of the input box.                       | `'large'｜'small'｜'default'` | `default` |
 | `[nzCollapseDisable]`  | Hide collapse                                    | `boolean`                   | `false`  |
 | `[nzExtra]`     | Render the content on the right                  | `TemplateRef<void>`         | -        |
-| `[nzSemantic]`     | Custom rendering next execution time | `TemplateRef<void>`         | -        |
+| `[nzSemantic]`     | Custom rendering next execution time | `TemplateRef<void>`         | -        |
+
+## Note
+
+### Supported format
+
+```text
+*    *    *    *    *    *
+┬    ┬    ┬    ┬    ┬    ┬
+│    │    │    │    │    |
+│    │    │    │    │    └ day of week (0 - 7, 1L - 7L) (0 or 7 is Sun)
+│    │    │    │    └───── month (1 - 12)
+│    │    │    └────────── day of month (1 - 31, L)
+│    │    └─────────────── hour (0 - 23)
+│    └──────────────────── minute (0 - 59)
+└───────────────────────── second (0 - 59, optional)
+```

components/cron-expression/doc/index.zh-CN.md

@@ -40,4 +40,20 @@ npm install cron-parser
 | `[nzBorderless]`     | 是否隐藏边框        | `boolean` | `false`   |
 | `[nzCollapseDisable]`  | 隐藏折叠面板         | `boolean`                   | `false`  |
 | `[nzExtra]`     | 自定义渲染右侧的内容 | `TemplateRef<void>`         | -        |
-| `[nzSemantic]`     | 自定义渲染下次执行时间 | `TemplateRef<void>`         | -        |
+| `[nzSemantic]`     | 自定义渲染下次执行时间 | `TemplateRef<void>`         | -        |
+
+## 注意
+
+### 支持格式
+
+```text
+*    *    *    *    *    *
+┬    ┬    ┬    ┬    ┬    ┬
+│    │    │    │    │    |
+│    │    │    │    │    └ day of week (0 - 7, 1L - 7L) (0 or 7 is Sun)
+│    │    │    │    └───── month (1 - 12)
+│    │    │    └────────── day of month (1 - 31, L)
+│    │    └─────────────── hour (0 - 23)
+│    └──────────────────── minute (0 - 59)
+└───────────────────────── second (0 - 59, optional)
+```

components/cron-expression/style/index.less

@@ -83,10 +83,6 @@
       display: flex;
       align-items: center;
       padding-left: @padding-md;
-
-      &-date {
-        flex: 1 1 auto;
-      }
     }
 
     &-list, &-icon {
@@ -106,21 +102,13 @@
     }
 
     &-icon {
-      height: 100%;
+      flex: 0 0 16px;
+      display: flex;
+      justify-content: center;
     }
   }
 
   &-error {
     color: @error-color;
   }
-
-  &-hint {
-    p {
-      display: flex;
-    }
-    span {
-      display: inline-block;
-      min-width: 40px;
-    }
-  }
 }

components/cron-expression/typings.ts

@@ -5,8 +5,6 @@
 
 export type TimeType = keyof Cron;
 
-export type TimeTypeError = 'secondError' | 'minuteError' | 'hourError' | 'dayError' | 'monthError' | 'weekError';
-
 export interface Cron {
   second?: CronValue;
   minute?: CronValue;

components/i18n/languages/en_US.ts

@@ -185,19 +185,7 @@ export default {
     hour: 'hour',
     day: 'day',
     month: 'month',
-    week: 'week',
-    secondError:
-      '<p><span>*</span>Any value</p><p><span>,</span>Separator between multiple values</p><p><span>-</span>Connector for interval values</p><p><span>/</span>Equally distributed</p><p><span>0-59</span>Allowable range</p>',
-    minuteError:
-      '<p><span>*</span>Any value</p><p><span>,</span>Separator between multiple values</p><p><span>-</span>Connector for interval values</p><p><span>/</span>Equally distributed</p><p><span>0-59</span>Allowable range</p>',
-    hourError:
-      '<p><span>*</span>Any value</p><p><span>,</span>Separator between multiple values</p><p><span>-</span>Connector for interval values</p><p><span>/</span>Equally distributed</p><p><span>0-23</span>Allowable range</p>',
-    dayError:
-      '<p><span>*</span>Any value</p><p><span>,</span>Separator between multiple values</p><p><span>-</span>Connector for interval values</p><p><span>/</span>Equally distributed</p><p><span>1-31</span>Allowable range</p>',
-    monthError:
-      '<p><span>*</span>Any value</p><p><span>,</span>Separator between multiple values</p><p><span>-</span>Connector for interval values</p><p><span>/</span>Equally distributed</p><p><span>1-12</span>Allowable range</p>',
-    weekError:
-      '<p><span>*</span>Any value</p><p><span>,</span>Separator between multiple values</p><p><span>-</span>Connector for interval values</p><p><span>/</span>Equally distributed</p><span>?</span> Not specify</p><p><p><span>0-7</span>Allowable range (0 represents Sunday, 1-7 are Monday to Sunday)</p>'
+    week: 'week'
   },
   QRCode: {
     expired: 'QR code expired',

components/i18n/languages/fa_IR.ts

@@ -185,19 +185,7 @@ export default {
     hour: 'ساعت',
     day: 'روز',
     month: 'ماه',
-    week: 'هفته',
-    secondError:
-      '<p><span>*</span>هر مقداری</p><p><span>,</span>جداکندده بین مقادیر متفاوت</p><p><span>-</span>وصل کننده مقادیر داخلی</p><p><span>/</span>به طور مساوی توزیع شده است</p><p><span>0-59</span>بازه مجاز</p>',
-    minuteError:
-      '<p><span>*</span>هر مقداری</p><p><span>,</span>جداکندده بین مقادیر متفاوت</p><p><span>-</span>وصل کننده مقادیر داخلی</p><p><span>/</span>به طور مساوی توزیع شده است</p><p><span>0-59</span>بازه مجاز</p>',
-    hourError:
-      '<p><span>*</span>هر مقداری</p><p><span>,</span>جداکندده بین مقادیر متفاوت</p><p><span>-</span>وصل کننده مقادیر داخلی</p><p><span>/</span>به طور مساوی توزیع شده است</p><p><span>0-23</span>بازه مجاز</p>',
-    dayError:
-      '<p><span>*</span>هر مقداری</p><p><span>,</span>جداکندده بین مقادیر متفاوت</p><p><span>-</span>وصل کننده مقادیر داخلی</p><p><span>/</span>به طور مساوی توزیع شده است</p><p><span>1-31</span>بازه مجاز</p>',
-    monthError:
-      '<p><span>*</span>هر مقداری</p><p><span>,</span>جداکندده بین مقادیر متفاوت</p><p><span>-</span>وصل کننده مقادیر داخلی</p><p><span>/</span>به طور مساوی توزیع شده است</p><p><span>1-12</span>بازه مجاز</p>',
-    weekError:
-      '<p><span>*</span>هر مقداری</p><p><span>,</span>جداکندده بین مقادیر متفاوت</p><p><span>-</span>وصل کننده مقادیر داخلی</p><p><span>/</span>به طور مساوی توزیع شده است</p><span>?</span>مشخص نیست</p><p><p><span>0-7</span>بازه مجاز (0 برای یک شنبه، از 1 تا 7 برای دوشنبه تا شنبه)</p>'
+    week: 'هفته'
   },
   QRCode: {
     expired: 'کد QR منقضی شده است',

components/i18n/languages/zh_CN.ts

@@ -181,19 +181,7 @@ export default {
     hour: '小时',
     day: '日',
     month: '月',
-    week: '周',
-    secondError:
-      '<p><span>*</span>任意值</p><p><span>,</span>多个值之间的分隔符</p><p><span>-</span>区间值的连接符</p><p><span>/</span>平均分配</p><p><span>0-59</span>允许范围</p>',
-    minuteError:
-      '<p><span>*</span>任意值</p><p><span>,</span>多个值之间的分隔符</p><p><span>-</span>区间值的连接符</p><p><span>/</span>平均分配</p><p><span>0-59</span>允许范围</p>',
-    hourError:
-      '<p><span>*</span> 任意值</p><p><span>,</span> 多个值之间的分隔符</p><p><span>-</span> 区间值的连接符</p><p><span>/</span> 平均分配</p><p><span>0-23</span> 允许范围</p>',
-    dayError:
-      '<p><span>*</span> 任意值</p><p><span>,</span> 多个值之间的分隔符</p><p><span>-</span> 区间值的连接符</p><p><span>/</span> 平均分配</p><p><span>1-31</span> 允许范围</p>',
-    monthError:
-      '<p><span>*</span> 任意值</p><p><span>,</span> 多个值之间的分隔符</p><p><span>-</span> 区间值的连接符</p><p><span>/</span> 平均分配</p><p><span>1-12</span> 允许范围</p>',
-    weekError:
-      '<p><span>*</span> 任意值</p><p><span>,</span> 多个值之间的分隔符</p><p><span>-</span> 区间值的连接符</p><p><span>/</span> 平均分配</p><p><span>?</span> 不指定</p><p><span>0-7</span> 允许范围（0代表周日，1-7依次为周一到周日）</p>'
+    week: '周'
   },
   QRCode: {
     expired: '二维码过期',