feat(module:form): reactive form support warning status (#4891)

* feat(module:form): reactive form support warning status * docs: update style
NG-ZORRO · Mar 20, 2020 · b1873da · b1873da
1 parent f295c10
commit b1873da
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/components/form/demo/validate-reactive.md b/components/form/demo/validate-reactive.md
@@ -12,7 +12,8 @@ title:
 1. `nzValidateStatus`: 校验状态，默认自动从 `nz-form-control` 中的 `NgControl` 获得校验状态，也可以手动指定为特定的 `NgControl`。
 2. `nzHasFeedback`：用于给输入框添加反馈图标。
 3. `nzSuccessTip` `nzWarningTip` `nzErrorTip` `nzValidatingTip`：设置不同状态校验文案。
-> 当同一种状态下存在多种提示情况时，`nzSuccessTip` `nzWarningTip` `nzErrorTip` `nzValidatingTip` 均支持传入 `TemplateRef<{ $implicit: FormControl }` 类型，可以通过[模板变量]((https://www.angular.cn/guide/template-syntax))导出 `FormControl` 后用于切换不同的提示信息。
+> 当同一种状态下存在多种提示情况时，`nzSuccessTip` `nzWarningTip` `nzErrorTip` `nzValidatingTip` 均支持传入 `TemplateRef<{ $implicit: FormControl }` 类型，可以通过[模板变量]((https://www.angular.cn/guide/template-syntax))导出 `FormControl` 后用于切换不同的提示信息。  
+> 当 FormControl.status 为 `INVALID` 并且错误包含 `{warning：true}` 时，`nz-form-control` 显示警告状态。
 
 ## en-US
 
@@ -21,4 +22,5 @@ We provide properties like `nzValidateStatus` `nzHasFeedback` in `nz-form-contro
 1. `nzValidateStatus`: validate status of form components, the default status comes from the `NgControl` in `nz-form-control`, you can set other `NgControl` to it.
 2. `nzHasFeedback`: display feed icon of input control
 3. `nzSuccessTip` `nzWarningTip` `nzErrorTip` `nzValidatingTip`：display validate message。
-> When there are multiple tips in the same state, `nzSuccessTip` `nzWarningTip` `nzErrorTip` `nzValidatingTip` supports the passing `TemplateRef<{ $implicit: FormControl }` type, which can be used to switch tips after exporting `FormControl` via the [template syntax](https://angular.io/guide/template-syntax).
+> When there are multiple tips in the same state, `nzSuccessTip` `nzWarningTip` `nzErrorTip` `nzValidatingTip` supports the passing `TemplateRef<{ $implicit: FormControl }` type, which can be used to switch tips after exporting `FormControl` via the [template syntax](https://angular.io/guide/template-syntax).  
+> When the FormControl.status is `INVALID`, and the errors contains `{warning:true}` , the `nz-form-control` display with warning status.
diff --git a/components/form/form-control.component.ts b/components/form/form-control.component.ts
@@ -137,27 +137,27 @@ export class NzFormControlComponent implements OnDestroy, OnInit, AfterContentIn
   private getControlStatus(validateString: string | null): NzFormControlStatusType {
     let status: NzFormControlStatusType;
 
-    if (validateString === 'error' || this.validateControlStatus('INVALID')) {
+    if (validateString === 'warning' || this.validateControlStatus('INVALID', 'warning')) {
+      status = 'warning';
+    } else if (validateString === 'error' || this.validateControlStatus('INVALID')) {
       status = 'error';
     } else if (validateString === 'validating' || validateString === 'pending' || this.validateControlStatus('PENDING')) {
       status = 'validating';
     } else if (validateString === 'success' || this.validateControlStatus('VALID')) {
       status = 'success';
-    } else if (validateString === 'warning') {
-      status = 'warning';
     } else {
       status = null;
     }
 
     return status;
   }
 
-  private validateControlStatus(validStatus: string): boolean {
+  private validateControlStatus(validStatus: string, statusType?: NzFormControlStatusType): boolean {
     if (!this.validateControl) {
       return false;
     } else {
       const { dirty, touched, status } = this.validateControl;
-      return (!!dirty || !!touched) && status === validStatus;
+      return (!!dirty || !!touched) && (statusType ? this.validateControl.hasError(statusType) : status === validStatus);
     }
   }
 

diff --git a/components/form/form-control.spec.ts b/components/form/form-control.spec.ts
@@ -126,14 +126,23 @@ describe('nz-form-control', () => {
   });
   describe('reactive init status', () => {
     let testBed: ComponentBed<NzTestReactiveFormControlInitStatusComponent>;
+    let testComponent: NzTestReactiveFormControlInitStatusComponent;
     let formItem: DebugElement;
     beforeEach(() => {
       testBed = createComponentBed(NzTestReactiveFormControlInitStatusComponent, testBedOptions);
+      testComponent = testBed.component;
       formItem = testBed.fixture.debugElement.query(By.directive(NzFormItemComponent));
     });
     it('should init status correct', () => {
       expect(formItem.nativeElement.classList).toContain(statusMap.error);
     });
+    it('should warning status work', () => {
+      testComponent.formGroup.get('input')!.setErrors({ warning: true });
+
+      testBed.fixture.detectChanges();
+
+      expect(formItem.nativeElement.classList).toContain(statusMap.warning);
+    });
   });
 });