摘要
本文主要讲述了：
- 模板驱动表单
- 响应式表单
正文
模板驱动表单
注意：如果要在对应模块的组件中使用模板驱动表单，需要在领域模块中引用@angular/forms中的FormsModule
用户输入会实时同步到变量中
input:text
示例：
my-angular/src/app/app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FooComponent } from './pages/foo/foo.component';
import { BarComponent } from './pages/bar/bar.component';
@NgModule({
declarations: [AppComponent, FooComponent, BarComponent],
imports: [BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
|
my-angular/src/app/app.component.html
1
2
| <input [(ngModel)]="foo" placeholder="placeholder" />
<div>{{ foo }}</div>
|
my-angular/src/app/app.component.ts
1
2
3
4
5
6
7
8
9
10
| import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
foo = '';
}
|
textarea
示例：
my-angular/src/app/app.component.html
1
2
| <textarea [(ngModel)]="foo" placeholder="placeholder"></textarea>
<div>{{ foo }}</div>
|
my-angular/src/app/app.component.ts
1
2
3
4
5
6
7
8
9
10
| import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
foo = '';
}
|
示例：
my-angular/src/app/app.component.html
1
2
3
4
| <input type="radio" [(ngModel)]="foo" value="1" />
<input type="radio" [(ngModel)]="foo" value="2" />
<input type="radio" [(ngModel)]="foo" value="3" />
<div>{{ foo }}</div>
|
my-angular/src/app/app.component.ts
1
2
3
4
5
6
7
8
9
10
| import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
foo = '';
}
|
select
示例：单选
my-angular/src/app/app.component.html
1
2
3
4
5
6
7
| <select [(ngModel)]="foo">
<option disabled value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div>{{ foo }}</div>
|
my-angular/src/app/app.component.ts
1
2
3
4
5
6
7
8
9
10
| import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
foo = '';
}
|
示例：多选
my-angular/src/app/app.component.html
1
2
3
4
5
6
7
| <select multiple [(ngModel)]="foo">
<option disabled value="">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div>{{ foo }}</div>
|
my-angular/src/app/app.component.ts
1
2
3
4
5
6
7
8
9
10
| import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
foo = [];
}
|
响应式表单
注意：如果要在对应模块的组件中使用响应式表单，需要在领域模块中引用@angular/forms中的ReactiveFormsModule
用户输入会实时同步到变量中
formGroup：键值formControlName：键名
示例：
my-angular/src/app/app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FooComponent } from './pages/foo/foo.component';
import { BarComponent } from './pages/bar/bar.component';
@NgModule({
declarations: [AppComponent, FooComponent, BarComponent],
imports: [BrowserModule, ReactiveFormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
|
my-angular/src/app/app.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div>
<form [formGroup]="myForm" (submit)="onSubmit()">
<label>username: </label>
<input type="text" formControlName="username" />
<p>{{ myForm.value.username }}</p>
<label>password: </label>
<input type="password" formControlName="password" />
<p>{{ myForm.value.password }}</p>
<button>Submit</button>
<button type="reset">Reset</button>
</form>
</div>
|
my-angular/src/app/app.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
myForm = new FormGroup({
username: new FormControl(null, [Validators.required]),
password: new FormControl(null, [Validators.required]),
});
onSubmit() {
console.log(this.myForm.value);
}
constructor() {}
ngOnInit(): void {}
}
|
formGroup：键值formArrayName：键名formControlName：键名
my-angular/src/app/app.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <div>
<form [formGroup]="myForm" (submit)="onSubmit()">
<label>username: </label>
<input type="text" formControlName="username" />
<p>{{ myForm.value.username }}</p>
<label>password: </label>
<input type="password" formControlName="password" />
<p>{{ myForm.value.password }}</p>
<label>phone: </label>
<div formArrayName="phones">
<div>
<input type="tel" formControlName="0" />
<p>{{ myForm.value.phones[0] }}</p>
</div>
<div>
<input type="tel" formControlName="1" />
<p>{{ myForm.value.phones[1] }}</p>
</div>
</div>
<button>Submit</button>
<button type="reset">Reset</button>
</form>
</div>
|
my-angular/src/app/app.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
myForm = new FormGroup({
username: new FormControl(null, [Validators.required]),
password: new FormControl(null, [Validators.required]),
phones: new FormArray([
new FormControl(null, Validators.required),
new FormControl(null),
]),
});
onSubmit() {
console.log(this.myForm.value);
}
constructor() {}
ngOnInit(): void {}
}
|
将FormBuilder注入组件
示例：
my-angular/src/app/app.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <div>
<form [formGroup]="myForm" (submit)="onSubmit()">
<label>username: </label>
<input type="text" formControlName="username" />
<p>{{ myForm.value.username }}</p>
<label>password: </label>
<input type="password" formControlName="password" />
<p>{{ myForm.value.password }}</p>
<label>phone: </label>
<div formArrayName="phones">
<div>
<input type="tel" formControlName="0" />
<p>{{ myForm.value.phones[0] }}</p>
</div>
<div>
<input type="tel" formControlName="1" />
<p>{{ myForm.value.phones[1] }}</p>
</div>
</div>
<button>Submit</button>
<button type="reset">Reset</button>
</form>
</div>
|
my-angular/src/app/app.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
myForm: FormGroup;
onSubmit() {
console.log(this.myForm.value);
}
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
username: [null, [Validators.required]],
password: [null, [Validators.required]],
phones: this.fb.array([[null, [Validators.required]], [null]]),
});
}
ngOnInit(): void {}
}
|
参考资料
本文对你有帮助？请支持我
支付宝
微信