Skip to content

Commit 5d4be72

Browse files
rmlzyrmlzy
committed
feat: add basic form demo
1 parent faa333e commit 5d4be72

23 files changed

+189
-93
lines changed

Diff for: ‎src/app/app.component.less

-1
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-

Diff for: ‎src/app/components/example/example.component.less

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ pre code {
99
font-weight: 400;
1010
}
1111

12-
code, kbd, pre {
12+
code,
13+
kbd,
14+
pre {
1315
font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
1416
font-size: 16px;
1517
direction: ltr;

Diff for: ‎src/app/components/example/example.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Component, Input, OnInit } from "@angular/core";
77
styleUrls: ["./example.component.less"],
88
})
99
export class ExampleComponent implements OnInit {
10-
@Input() theme = 'light';
10+
@Input() theme = "light";
1111

1212
constructor() {}
1313

Diff for: ‎src/app/config/app-menu.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ export const APP_MENUS: IAppMenu = [
3131
level: 1,
3232
title: "Form",
3333
icon: "form",
34-
children: [
35-
{ level: 2, title: "Basic form", link: "/form/basic" },
36-
],
34+
children: [{ level: 2, title: "Basic form", link: "/form/basic" }],
3735
},
3836
];

Diff for: ‎src/app/pages/form/basic/basic.component.html

+102-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,102 @@
1-
<p>basic works!</p>
1+
<nz-page-header nzTitle="Basic Form">
2+
<nz-breadcrumb nz-page-header-breadcrumb>
3+
<nz-breadcrumb-item>
4+
<a routerLink="/">Home</a>
5+
</nz-breadcrumb-item>
6+
<nz-breadcrumb-item>
7+
<a routerLink="/form">Form</a>
8+
</nz-breadcrumb-item>
9+
<nz-breadcrumb-item>Basic Form</nz-breadcrumb-item>
10+
</nz-breadcrumb>
11+
<nz-page-header-content>
12+
Form pages are used to collect or verify information to users, and basic forms are common in
13+
scenarios where there are fewer data items.
14+
</nz-page-header-content>
15+
</nz-page-header>
16+
17+
<nz-card>
18+
<form nz-form [formGroup]="loginForm" (ngSubmit)="submit()">
19+
<nz-form-item>
20+
<nz-form-label [nzSm]="7" nzRequired>Title</nz-form-label>
21+
<nz-form-control [nzSm]="10" nzErrorTip="Please enter a title">
22+
<input nz-input formControlName="title" placeholder="Give the target a name" />
23+
</nz-form-control>
24+
</nz-form-item>
25+
26+
<nz-form-item>
27+
<nz-form-label [nzSm]="7" nzRequired>Goal description</nz-form-label>
28+
<nz-form-control [nzSm]="10" nzErrorTip="Please enter a description of the goal">
29+
<textarea
30+
nz-input
31+
[nzAutosize]="{ minRows: 4, maxRows: 6 }"
32+
formControlName="goal"
33+
placeholder="Please enter your work goals"
34+
></textarea>
35+
</nz-form-control>
36+
</nz-form-item>
37+
38+
<nz-form-item>
39+
<nz-form-label [nzSm]="7" nzRequired>Metrics</nz-form-label>
40+
<nz-form-control [nzSm]="10" nzErrorTip="Please enter a metric">
41+
<textarea
42+
nz-input
43+
[nzAutosize]="{ minRows: 4, maxRows: 6 }"
44+
formControlName="standard"
45+
placeholder="Please enter a metric"
46+
></textarea>
47+
</nz-form-control>
48+
</nz-form-item>
49+
50+
<nz-form-item>
51+
<nz-form-label [nzSm]="7">Client</nz-form-label>
52+
<nz-form-control [nzSm]="10">
53+
<input
54+
nz-input
55+
formControlName="client"
56+
placeholder="Please describe your customer service, internal customers directly @ Name / job number"
57+
/>
58+
</nz-form-control>
59+
</nz-form-item>
60+
61+
<nz-form-item>
62+
<nz-form-label [nzSm]="7">Inviting critics</nz-form-label>
63+
<nz-form-control [nzSm]="10">
64+
<input
65+
nz-input
66+
formControlName="invites"
67+
placeholder="Please direct @ Name / job number, you can invite up to 5 people"
68+
/>
69+
</nz-form-control>
70+
</nz-form-item>
71+
72+
<nz-form-item>
73+
<nz-form-label [nzSm]="7">Weight</nz-form-label>
74+
<nz-form-control [nzSm]="10">
75+
<nz-input-number
76+
style="width: 200px"
77+
formControlName="weight"
78+
nzPlaceHolder="Please enter weight"
79+
></nz-input-number>
80+
<span>%</span>
81+
</nz-form-control>
82+
</nz-form-item>
83+
84+
<nz-form-item>
85+
<nz-form-label [nzSm]="7">Target disclosure</nz-form-label>
86+
<nz-form-control [nzSm]="10" nzExtra="Customers and invitees are shared by default">
87+
<nz-radio-group formControlName="publicType">
88+
<label nz-radio nzValue="1">Public</label>
89+
<label nz-radio nzValue="2">Partial public</label>
90+
<label nz-radio nzValue="3">Private</label>
91+
</nz-radio-group>
92+
</nz-form-control>
93+
</nz-form-item>
94+
95+
<nz-form-item nz-row>
96+
<nz-form-control [nzOffset]="7">
97+
<button nz-button nzType="primary" type="submit" class="mr15">Submit</button>
98+
<button nz-button type="button">Save</button>
99+
</nz-form-control>
100+
</nz-form-item>
101+
</form>
102+
</nz-card>

Diff for: ‎src/app/pages/form/basic/basic.component.ts

+24-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,34 @@
11
import { Component, OnInit } from "@angular/core";
2+
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
3+
import { NzFormTooltipIcon } from "ng-zorro-antd/form";
24

35
@Component({
46
selector: "app-basic",
57
templateUrl: "./basic.component.html",
68
styleUrls: ["./basic.component.less"],
79
})
810
export class BasicComponent implements OnInit {
9-
constructor() {}
11+
submitting = false;
12+
loginForm!: FormGroup;
1013

11-
ngOnInit(): void {}
14+
constructor(private fb: FormBuilder) {}
15+
16+
ngOnInit() {
17+
this.loginForm = this.fb.group({
18+
title: ["", [Validators.required]],
19+
goal: ["", [Validators.required]],
20+
standard: ["", [Validators.required]],
21+
client: [""],
22+
invites: [""],
23+
weight: [""],
24+
publicType: ["1"],
25+
});
26+
}
27+
28+
async submit(): Promise<void> {
29+
for (const i in this.loginForm.controls) {
30+
this.loginForm.controls[i].markAsDirty();
31+
this.loginForm.controls[i].updateValueAndValidity();
32+
}
33+
}
1234
}

Diff for: ‎src/app/pages/form/form-routing.module.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import { RouterModule, Routes } from "@angular/router";
33
import { BasicComponent } from "./basic/basic.component";
44

55
const routes: Routes = [
6-
{ path: "basic", component: BasicComponent }];
6+
{ path: "", redirectTo: "/basic", pathMatch: "full" },
7+
{ path: "basic", component: BasicComponent },
8+
];
79

810
@NgModule({
911
imports: [RouterModule.forChild(routes)],
10-
exports: [RouterModule]
12+
exports: [RouterModule],
1113
})
12-
export class FormRoutingModule {
13-
}
14+
export class FormRoutingModule {}

Diff for: ‎src/app/pages/form/form.module.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { BasicComponent } from "./basic/basic.component";
77

88
@NgModule({
99
declarations: [BasicComponent],
10-
imports: [CommonModule, SharedModule, FormRoutingModule]
10+
imports: [CommonModule, SharedModule, FormRoutingModule],
1111
})
12-
export class FormModule {
13-
}
12+
export class FormModule {}

Diff for: ‎src/app/pages/interface/blank/blank.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="empty">
22
<div class="empty-img">
3-
<img src="assets/images/empty.svg" height="128" alt="">
3+
<img src="assets/images/empty.svg" height="128" alt="" />
44
</div>
55
<p class="empty-title">No results found</p>
66
<p class="empty-subtitle text-muted">

Diff for: ‎src/app/pages/interface/blank/blank.component.spec.ts

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { ComponentFixture, TestBed } from '@angular/core/testing';
1+
import { ComponentFixture, TestBed } from "@angular/core/testing";
22

3-
import { BlankComponent } from './blank.component';
3+
import { BlankComponent } from "./blank.component";
44

5-
describe('BlankComponent', () => {
5+
describe("BlankComponent", () => {
66
let component: BlankComponent;
77
let fixture: ComponentFixture<BlankComponent>;
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
11-
declarations: [ BlankComponent ]
12-
})
13-
.compileComponents();
11+
declarations: [BlankComponent],
12+
}).compileComponents();
1413
});
1514

1615
beforeEach(() => {
@@ -19,7 +18,7 @@ describe('BlankComponent', () => {
1918
fixture.detectChanges();
2019
});
2120

22-
it('should create', () => {
21+
it("should create", () => {
2322
expect(component).toBeTruthy();
2423
});
2524
});

Diff for: ‎src/app/pages/interface/blank/blank.component.ts

+6-9
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit } from "@angular/core";
22

33
@Component({
4-
selector: 'app-blank',
5-
templateUrl: './blank.component.html',
6-
styleUrls: ['./blank.component.less']
4+
selector: "app-blank",
5+
templateUrl: "./blank.component.html",
6+
styleUrls: ["./blank.component.less"],
77
})
88
export class BlankComponent implements OnInit {
9+
constructor() {}
910

10-
constructor() { }
11-
12-
ngOnInit(): void {
13-
}
14-
11+
ngOnInit(): void {}
1512
}

Diff for: ‎src/app/pages/interface/buttons/buttons.component.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Component, OnInit } from "@angular/core";
33
@Component({
44
selector: "app-buttons",
55
templateUrl: "./buttons.component.html",
6-
styleUrls: ["./buttons.component.less"]
6+
styleUrls: ["./buttons.component.less"],
77
})
88
export class ButtonsComponent implements OnInit {
99
standardCode = `<button nz-button nzType="primary">Primary Button</button>
@@ -50,9 +50,7 @@ export class ButtonsComponent implements OnInit {
5050
<i nz-icon nzType="download"></i>
5151
</button>`;
5252

53-
constructor() {
54-
}
53+
constructor() {}
5554

56-
ngOnInit(): void {
57-
}
55+
ngOnInit(): void {}
5856
}

Diff for: ‎src/app/pages/interface/interface.module.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { TypographyComponent } from "./typography/typography.component";
1212
import { CustomComponentsComponent } from "./custom-components/custom-components.component";
1313
import { EmptyComponent } from "./empty/empty.component";
1414
import { AccordionComponent } from "./accordion/accordion.component";
15-
import { BlankComponent } from './blank/blank.component';
15+
import { BlankComponent } from "./blank/blank.component";
1616

1717
@NgModule({
1818
declarations: [

Diff for: ‎src/app/shared/shared.module.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
22
import { CommonModule } from "@angular/common";
3-
import { FormsModule } from "@angular/forms";
3+
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
44
import { NgApexchartsModule } from "ng-apexcharts";
55
import { NgZorroAntdModule } from "./ng-zorro-antd.module";
66
import { ExampleComponent, TagPickerComponent, NgCardComponent } from "../components";
77

8+
const globalCmpts = [ExampleComponent, TagPickerComponent, NgCardComponent];
9+
810
@NgModule({
9-
imports: [CommonModule, FormsModule, NgZorroAntdModule, NgApexchartsModule],
10-
declarations: [ExampleComponent, TagPickerComponent, NgCardComponent],
11+
imports: [CommonModule, FormsModule, ReactiveFormsModule, NgZorroAntdModule, NgApexchartsModule],
12+
declarations: [...globalCmpts],
1113
exports: [
1214
FormsModule,
15+
ReactiveFormsModule,
1316
NgZorroAntdModule,
1417
NgApexchartsModule,
15-
ExampleComponent,
16-
TagPickerComponent,
17-
NgCardComponent,
18+
...globalCmpts,
1819
],
1920
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2021
})

Diff for: ‎src/assets/styles/global.less

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616
margin-right: 15px;
1717
}
1818

19+
.ant-page-header {
20+
padding: 0 0 16px !important;
21+
}
22+
1923
// 报错页面
2024
.error {
2125
position: relative;

Diff for: ‎src/environments/environment.prod.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export const environment = {
2-
production: true
2+
production: true,
33
};

Diff for: ‎src/environments/environment.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// The list of file replacements can be found in `angular.json`.
44

55
export const environment = {
6-
production: false
6+
production: false,
77
};
88

99
/*

Diff for: ‎src/main.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { enableProdMode } from '@angular/core';
2-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
1+
import { enableProdMode } from "@angular/core";
2+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
33

4-
import { AppModule } from './app/app.module';
5-
import { environment } from './environments/environment';
4+
import { AppModule } from "./app/app.module";
5+
import { environment } from "./environments/environment";
66

77
if (environment.production) {
88
enableProdMode();
99
}
1010

11-
platformBrowserDynamic().bootstrapModule(AppModule)
12-
.catch(err => console.error(err));
11+
platformBrowserDynamic()
12+
.bootstrapModule(AppModule)
13+
.catch((err) => console.error(err));

Diff for: ‎src/polyfills.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,7 @@
5555
/***************************************************************************************************
5656
* Zone JS is required by default for Angular itself.
5757
*/
58-
import 'zone.js/dist/zone'; // Included with Angular CLI.
59-
58+
import "zone.js/dist/zone"; // Included with Angular CLI.
6059

6160
/***************************************************************************************************
6261
* APPLICATION IMPORTS

0 commit comments

Comments
 (0)