Forms
2 - Types namely
1. Template driven
2. Reactive Forms
3 - Building Blocks namely
FormControl (single Item),
FormGroup (collection of Form Controls)
FormArray (Array of Form Controls)
Method 1 - TDF
ng new tdf --routing=true --style=css
ng serve -o to check
Open app.module.ts and add FormsModule to it
import { FormsModule} from '@angular/forms';
add that in imports section
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
add the following in AppComponent class in app.component.ts file
countryList:country[] = [
new country("1", "India"),
new country('2', 'USA'),
new country('3', 'England')
];
Add the following class country:
export class country {
id:string;
name:string;
constructor(id:string, name:string) {
this.id=id;
this.name=name;
}
}
Delete the old contents in app.component.html and add the following contents
form>
<table border="2" >
<tr>
<label for="firstname">First Name :</label>
<input type="text" id="firstname" name="firstname">
</tr>
<tr>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname">
</tr>
<tr>
<label for="email">Email :</label>
<input type="text" id="email" name="email">
</tr>
<tr>
<label for="gender">Gender :</label>
<input type="radio" value="male" id="gender" name="gender"> Male
<input type="radio" value="female" id="gender" name="gender"> Female
</tr>
<tr>
<label for="isMarried">Married :</label>
<input type="checkbox" id="isMarried" name="isMarried">
</tr>
<tr>
<label for="country">country :</label>
<select name="country" id="country">
<option selected="" value=""></option>
<option [ngValue]="c.id" *ngFor="let c of countryList">
{{c.name}}
</option>
</select>
</tr>
<tr>
<button type="submit">Submit</button>
</tr>
</table>
</form>
change the <form> line as shown below
<form #contactform="ngForm" (ngSubmit)="onSubmit(contactForm)"></form>
add ngModel to all six form elements: This will be similar to these contents
<p>Template Driven Form</p>
<!-- <form> -->
<form #contactForm="ngForm" (ngSubmit) = "onSubmit(contactForm)">
<table border="2" >
<tr>
<label for="firstname">First Name :</label>
<input type="text" id="firstname" name="firstname" ngModel>
</tr>
<tr>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" ngModel>
</tr>
<tr>
<label for="email">Email :</label>
<input type="text" id="email" name="email" ngModel>
</tr>
<tr>
<label for="gender">Gender :</label>
<input type="radio" value="male" id="gender" name="gender" ngModel> Male
<input type="radio" value="female" id="gender" name="gender" ngModel> Female
</tr>
<tr>
<label for="isMarried">Married :</label>
<input type="checkbox" id="isMarried" name="isMarried" ngModel>
</tr>
<tr>
<label for="country">country :</label>
<select name="country" id="country" ngModel>
<option [ngValue]="c.id" *ngFor="let c of countryList">
{{c.name}}
</option>
</select>
</tr>
<tr>
<button type="submit">Submit</button>
</tr>
</table>
</form>
app.component.ts will have these contents
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'tdf';
countryList:country[]=[
new country("1", "india"),
new country("2", "indonesia"),
new country("3", "usa"),
new country("4", "uk")
]
onSubmit(contactForm: { value: any; }){
console.log(contactForm.value);
}
}
export class country {
id: string;
name: string;
constructor(id:string,name:string){
this.id=id;
this.name=name;
}
}
Now run by
ng serve -o and check the browser window output(similar to the following) with console output checking the entered values after submit button pressed.
Add the following contents in the app.component.ts
Entered Values:
<table>
<tr>
<td>
Value : {{contactForm.value | json }}
</td>
</tr>
<tr>
<td>
Touched : {{contactForm.touched }}
</td>
</tr>
<tr>
<td>
Submitted : {{contactForm.submitted }}
</td>
</tr>
</table>
Check the browser output similar to after you entered form and submitted:
Try this exercise to understand th values:
In app.component.html try commenting (by marking all and ctrl+/ ) the old contents add the following
<form>
<input type="text" name="firstname" #fname="ngModel" ngModel>
</form>
<pre>
Value : {{fname.value}} <br>
valid : {{fname.valid}} <br>
invalid : {{fname.invalid}} <br>
touched : {{fname.touched}}
</pre>
Check the browser output
before entering
after entering
In app.component..html add the following contents commenting the old:
<form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm)"></form>
<div ngModelGroup="address">
<p>
<label for="city">City</label>
<input type="text" name="city" ngModel>
</p>
<p>
<label for="street">Street</label>
<input type="text" name="street" ngModel>
</p>
<p>
<label for="pincode">Pin Code</label>
<input type="text" name="pincode" ngModel>
</p>
</div>
</form>
Check the output values (similar to the one shown below) for address in browser :
I think you catch some basic points in form handling
Method 2. Reactive Forms
Step 1:
Create a project reactive-demo by
ng new demo-react
Step 2:
Open app.module.ts and add in the beginning
import { ReactiveFormsModule } from '@angular/forms';
and add the following in import section
imports: [
...
ReactiveFormsModule
Step 3:
Modify app.component.html, deleting the all the old contents and add these following code:
<h1> {{title}} </h1>
<hr color="red">
<form [formGroup] = "loginForm" (ngSubmit)="loginUser()">
<label>Name : </label><input type="text" place holder="enter name" formControlName="user">
<br><br>
<label>Password : </label>
<input type="password" place holder="enter password" formControlName="password"> <br>
<button>Login</button>
</form>
Please note
1. Form with [formGroup] and (ngSubmit)="loginUser()" function
2. formControleName = user and formControleName=password attributes in <input> tag
Step 4:
Modify the app.component.ts by adding the following as shown below
import { Component } from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular Demo-React-Form';
loginForm = new FormGroup({
user: new FormControl(''),
password: new FormControl(''),
})
loginUser(){
console.log(this.loginForm.value)
}
}
Step 5:
Now run by
ng serve -o
Check console output after clicking login Button to see the o/p similar to the following:
before entering user name and password
After Entering and clicking the button Login. see in console, the o/p will be similar to this.
Happy Angular Forms....☺☺☺.!!!
