效果：
app-module.ts
1 import { BrowserModule } from '@angular/platform-browser';
2 import { NgModule } from '@angular/core';
3
4 import { AppComponent } from './app.component';
5
6 import { ReactiveFormsModule } from '@angular/forms';
7 import { NameEditComponent } from './components/name-edit/name-edit.component';
8 import { ProfileEditorComponent } from './components/profile-editor/profile-editor.component';
9 import { NewProfileEditorComponent } from './components/new-profile-editor/new-profile-editor.component';
10 @NgModule({
11 declarations: [
12 AppComponent,
13 NameEditComponent,
14 ProfileEditorComponent,
15 NewProfileEditorComponent
16 ],
17 imports: [
18 BrowserModule,
19 ReactiveFormsModule
20 ],
21 providers: [],
22 bootstrap: [AppComponent]
23 })
24 export class AppModule { }
app-component.html
1 <app-name-edit></app-name-edit> 2 <hr> 3 <app-profile-editor></app-profile-editor> 4 <hr> 5 <app-new-profile-editor></app-new-profile-editor>
单个控件：name-edit
ts:
1 /*
2 *目的：演示使用FormControl创建表单控件，并且实现设值setValue
3 */
4 import { Component, OnInit } from '@angular/core';
5 import { FormControl } from '@angular/forms';
6
7 @Component({
8 selector: 'app-name-edit',
9 templateUrl: './name-edit.component.html',
10 styleUrls: ['./name-edit.component.css']
11 })
12 export class NameEditComponent implements OnInit {
13 name = new FormControl('');
14 constructor() { }
15
16 ngOnInit(): void {
17 }
18 updateName(): void {
19 this.name.setValue('Nancy');
20 }
21 }
html:
1 <div class="box">
2 <label >
3 Name:
4 <input class="input-text" type="text" [formControl]="name">
5 </label>
6 <p>
7 Value: {{ name.value }}
8 </p>
9 <p>
10 <button (click)="updateName()">Update Name</button>
11 </p>
12 </div>
css:
1 .box{
2 width: 300px;
3 height: 200px;
4 position: relative;
5 left:40%;
6 border:1px dashed black;
7 border-radius: 45pt/20pt;
8 }
9 .input-text{
10 border:2px solid lightskyblue;
11 box-shadow: 0 0 8px 2px rgba(0,0,0,0.23);
12 position: relative;
13 left: 10px;
14 }
15 label,p{
16 position: relative;
17 top: 10px;
18 left:10px;
19 }
使用FormGroup创建控件组：profile-editor
ts:
1 /*
2 *目的：演示使用FormGroup创建控件组，并且实现表单设值patchValue
3 */
4 import { Component, OnInit } from '@angular/core';
5 import { FormControl, FormGroup } from '@angular/forms';
6
7 @Component({
8 selector: 'app-profile-editor',
9 templateUrl: './profile-editor.component.html',
10 styleUrls: ['./profile-editor.component.css']
11 })
12 export class ProfileEditorComponent implements OnInit {
13
14 constructor() { }
15 profileForm = new FormGroup({
16 firstName: new FormControl(''),
17 lastName: new FormControl(''),
18 address: new FormGroup({
19 street: new FormControl(''),
20 city: new FormControl(''),
21 state: new FormControl(''),
22 zip: new FormControl('')
23 })
24 });
25
26 ngOnInit(): void {
27 }
28 onSubmit(): void {
29 // TODO: Use EventEmitter with form value
30 console.warn(this.profileForm.value);
31 }
32 updateProfile(): void {
33 this.profileForm.patchValue({
34 firstName: 'Nancy',
35 address: {
36 street: '123 Drew Street'
37 }
38 });
39 }
40 }
html:
1 <form [formGroup]="profileForm" (ngSubmit)="onSubmit()"> 2 3 <label> 4 First Name: 5 <input type="text" formControlName="firstName"> 6 </label> 7 8 <label> 9 Last Name: 10 <input type="text" formControlName="lastName"> 11 </label> 12 13 <div formGroupName="address"> 14 <h3>Address</h3> 15 16 <label> 17 Street: 18 <br> 19 <input type="text" formControlName="street"> 20 </label> 21 <br> 22 <label> 23 City: 24 <br> 25 <input type="text" formControlName="city"> 26 </label> 27 <br> 28 <label> 29 State: 30 <br> 31 <input type="text" formControlName="state"> 32 </label> 33 <br> 34 <label> 35 Zip Code: 36 <br> 37 <input type="text" formControlName="zip"> 38 </label> 39 </div> 40 41 <p> 42 <button type="submit" [disabled]="!profileForm.valid">Submit</button> 43 </p> 44 45 <p> 46 <button (click)="updateProfile()">Update Profile</button> 47 </p> 48 </form>
css:
1 form{
2 width: 300px;
3 height: 400px;
4 position: relative;
5 left:40%;
6 border:1px dashed black;
7 border-radius: 45pt/20pt;
8 }
9 input{
10 border:2px solid lightskyblue;
11 box-shadow: 0 0 8px 2px rgba(0,0,0,0.23);
12 position: relative;
13 left:10px;
14 }
15 label,p{
16 position: relative;
17 top: 10px;
18 left:10px;
19 }
使用FormBuilder创建控件组：new-profile-editor
ts:
1 /*
2 *目的：演示使用FormBuilder创建控件组，并且实现简单的表单验证以及表单设值patchValue
3 */
4 import { Component, OnInit } from '@angular/core';
5 import {FormBuilder} from '@angular/forms';
6 import { Validators } from '@angular/forms';
7
8 @Component({
9 selector: 'app-new-profile-editor',
10 templateUrl: './new-profile-editor.component.html',
11 styleUrls: ['./new-profile-editor.component.css']
12 })
13 export class NewProfileEditorComponent implements OnInit {
14
15 profileForm = this.fb.group({
16 firstName: ['', Validators.required],
17 lastName: [''],
18 address: this.fb.group({
19 street: [''],
20 city: [''],
21 state: [''],
22 zip: ['']
23 }),
24 });
25 constructor(private fb: FormBuilder) { }
26
27 ngOnInit(): void {
28 }
29 onSubmit(): void {
30 // TODO: Use EventEmitter with form value
31 console.warn(this.profileForm.value);
32 }
33 updateProfile(): void {
34 this.profileForm.patchValue({
35 firstName: 'Nancy',
36 address: {
37 street: '123 Drew Street'
38 }
39 });
40 }
41 }
html:
1 <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
2
3 <label>
4 First Name:
5 <input type="text" formControlName="firstName">
6 </label>
7
8 <label>
9 Last Name:
10 <input type="text" formControlName="lastName" required>
11 </label>
12
13 <div formGroupName="address">
14 <h3>Address</h3>
15
16 <label>
17 Street:
18 <br>
19 <input type="text" formControlName="street">
20 </label>
21 <br>
22 <label>
23 City:
24 <br>
25 <input type="text" formControlName="city">
26 </label>
27 <br>
28 <label>
29 State:
30 <br>
31 <input type="text" formControlName="state">
32 </label>
33 <br>
34 <label>
35 Zip Code:
36 <br>
37 <input type="text" formControlName="zip">
38 </label>
39 </div>
40
41 <p>
42 <button type="submit" [disabled]="!profileForm.valid">Submit</button>
43 </p>
44
45 <p>
46 <button (click)="updateProfile()">Update Profile</button>
47 </p>
48 <p>
49 Form Status: {{ profileForm.status }}
50 </p>
51 </form>
css:
1 form{
2 width: 300px;
3 height: 420px;
4 position: relative;
5 left:40%;
6 border:1px dashed black;
7 border-radius: 45pt/20pt;
8 }
9 input{
10 border:2px solid lightskyblue;
11 box-shadow: 0 0 8px 2px rgba(0,0,0,0.23);
12 position: relative;
13 left:10px;
14 }
15 label,p{
16 position: relative;
17 top: 10px;
18 left:10px;
19 }