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
27
28
29
30
31
32
33
| import {Component} from '@angular/core';
import {ReactiveFormsModule, FormControl, FormGroup} from '@angular/forms';
@Component({
selector: 'app-root',
template: `
<form [formGroup]="profileForm" (ngSubmit)="handleSubmit()">
<label>
Name
<input type="text" formControlName="name" />
</label>
<label>
Email
<input type="email" formControlName="email" />
</label>
<button type="submit">Submit</button>
<h2>Profile Form</h2>
<p>Name: {{profileForm.value.name}}</p>
<p>Email: {{profileForm.value.email}}</p>
</form>
`,
imports: [ReactiveFormsModule],
})
export class AppComponent {
profileForm = new FormGroup({
name: new FormControl(''),
email: new FormControl(''),
});
handleSubmit() {
alert(this.profileForm.value.name + ' | ' + this.profileForm.value.email);
}
}
|