跟着官网学Angular-创建响应式表单-源代码

效果：

 

 

 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 }

 

posted @ 2020-10-20 10:58  DurianTRY  阅读(140)  评论(0)  编辑  收藏  举报