Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(module:form): make form work with status (#7489)
* feat(module:form): emit status changes to notify components to change * feat(module:form): make date-picker work in form * feat(module:form): make input work in form * chore(module:input-number): make input-number-group work in form * fix(module:checkbox): make checkbox work in form * fix(module:radio): make radio work in form * fix(module:select): make select work in form * fix(module:time-picker): make time picker work in form * fix(module:transfer): make transfer work in form * fix(module:tree-select): make tree select work in form * fix(module:mention): make mention work in form * fix(module:input): make input work in form * fix(module:input): not render status under addonbefore or addonafter * fix(module:form): add tests * fix(module:input): move feedback component to entrypoint * chore: fix some demos * fix(module:form): move feedback to form-patch module
- Loading branch information
1 parent
23a2fd5
commit 98ac620
Showing
60 changed files
with
1,400 additions
and
182 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| /** | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE | ||
| */ | ||
|
|
||
| export * from './public-api'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "lib": { | ||
| "entryFile": "public-api.ts" | ||
| } | ||
| } |
54 changes: 54 additions & 0 deletions
54
components/core/form/nz-form-item-feedback-icon.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /** | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE | ||
| */ | ||
|
|
||
| import { | ||
| ChangeDetectionStrategy, | ||
| ChangeDetectorRef, | ||
| Component, | ||
| Input, | ||
| OnChanges, | ||
| SimpleChanges, | ||
| ViewEncapsulation | ||
| } from '@angular/core'; | ||
|
|
||
| import { NzValidateStatus } from 'ng-zorro-antd/core/types'; | ||
|
|
||
| const iconTypeMap = { | ||
| error: 'close-circle-fill', | ||
| validating: 'loading', | ||
| success: 'check-circle-fill', | ||
| warning: 'exclamation-circle-fill' | ||
| } as const; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-form-item-feedback-icon', | ||
| exportAs: 'nzFormFeedbackIcon', | ||
| preserveWhitespaces: false, | ||
| encapsulation: ViewEncapsulation.None, | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| template: ` <i *ngIf="iconType" nz-icon [nzType]="iconType"></i> `, | ||
| host: { | ||
| class: 'ant-form-item-feedback-icon', | ||
| '[class.ant-form-item-feedback-icon-error]': 'status==="error"', | ||
| '[class.ant-form-item-feedback-icon-warning]': 'status==="warning"', | ||
| '[class.ant-form-item-feedback-icon-success]': 'status==="success"', | ||
| '[class.ant-form-item-feedback-icon-validating]': 'status==="validating"' | ||
| } | ||
| }) | ||
| export class NzFormItemFeedbackIconComponent implements OnChanges { | ||
| @Input() status: NzValidateStatus = ''; | ||
| constructor(public cdr: ChangeDetectorRef) {} | ||
|
|
||
| iconType: typeof iconTypeMap[keyof typeof iconTypeMap] | null = null; | ||
|
|
||
| ngOnChanges(_changes: SimpleChanges): void { | ||
| this.updateIcon(); | ||
| } | ||
|
|
||
| updateIcon(): void { | ||
| this.iconType = this.status ? iconTypeMap[this.status] : null; | ||
| this.cdr.markForCheck(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { Component, DebugElement } from '@angular/core'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { NoopAnimationsModule } from '@angular/platform-browser/animations'; | ||
|
|
||
| import { NzFormPatchModule } from 'ng-zorro-antd/core/form/nz-form-patch.module'; | ||
| import { ɵComponentBed as ComponentBed, ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core/testing'; | ||
| import { NzValidateStatus } from 'ng-zorro-antd/core/types'; | ||
|
|
||
| import { NzFormItemFeedbackIconComponent } from './nz-form-item-feedback-icon.component'; | ||
|
|
||
| const testBedOptions = { imports: [NzFormPatchModule, NoopAnimationsModule] }; | ||
|
|
||
| describe('nz-form-item-feedback-icon', () => { | ||
| describe('default', () => { | ||
| let testBed: ComponentBed<NzTestFormItemFeedbackIconComponent>; | ||
| let fixtureInstance: NzTestFormItemFeedbackIconComponent; | ||
| let feedback: DebugElement; | ||
| beforeEach(() => { | ||
| testBed = createComponentBed(NzTestFormItemFeedbackIconComponent, testBedOptions); | ||
| fixtureInstance = testBed.fixture.componentInstance; | ||
| feedback = testBed.fixture.debugElement.query(By.directive(NzFormItemFeedbackIconComponent)); | ||
| testBed.fixture.detectChanges(); | ||
| }); | ||
| it('should className correct', () => { | ||
| expect(feedback.nativeElement.classList).toContain('ant-form-item-feedback-icon'); | ||
| fixtureInstance.status = 'success'; | ||
| testBed.fixture.detectChanges(); | ||
| expect(feedback.nativeElement.classList).toContain('ant-form-item-feedback-icon-success'); | ||
| expect(feedback.nativeElement.querySelector('.anticon-check-circle-fill')).toBeTruthy(); | ||
|
|
||
| fixtureInstance.status = 'error'; | ||
| testBed.fixture.detectChanges(); | ||
| expect(feedback.nativeElement.classList).toContain('ant-form-item-feedback-icon-error'); | ||
| expect(feedback.nativeElement.querySelector('.anticon-close-circle-fill')).toBeTruthy(); | ||
|
|
||
| fixtureInstance.status = 'warning'; | ||
| testBed.fixture.detectChanges(); | ||
| expect(feedback.nativeElement.classList).toContain('ant-form-item-feedback-icon-warning'); | ||
| expect(feedback.nativeElement.querySelector('.anticon-exclamation-circle-fill')).toBeTruthy(); | ||
|
|
||
| fixtureInstance.status = 'validating'; | ||
| testBed.fixture.detectChanges(); | ||
| expect(feedback.nativeElement.classList).toContain('ant-form-item-feedback-icon-validating'); | ||
| expect(feedback.nativeElement.querySelector('.anticon-loading')).toBeTruthy(); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| @Component({ | ||
| template: ` <nz-form-item-feedback-icon [status]="status"></nz-form-item-feedback-icon> ` | ||
| }) | ||
| export class NzTestFormItemFeedbackIconComponent { | ||
| status: NzValidateStatus = ''; | ||
| } |
Oops, something went wrong.