make a one form which have following fields :
<form (ngSubmit)="onSubmit()" #userForm="ngForm">
<div>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" [(ngModel)]="user.firstName" required>
</div>
<div>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" [(ngModel)]="user.lastName" required>
</div>
<div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" [(ngModel)]="user.email" required>
</div>
<div>
<label for="mobile">Mobile Number:</label>
<input type="number" id="mobile" name="mobile" [(ngModel)]="user.mobile" required>
</div>
<div>
<label>Gender:</label>
<label><input type="radio" name="gender" value="male" [(ngModel)]="user.gender"> Male</label>
<label><input type="radio" name="gender" value="female" [(ngModel)]="user.gender"> Female</label>
</div>
<div>
<label for="address">Address:</label>
<textarea id="address" name="address" [(ngModel)]="user.address" required></textarea>
</div>
<div>
<label for="pincode">Pincode:</label>
<input type="number" id="pincode" name="pincode" [(ngModel)]="user.pincode" required>
</div>
<div>
<label for="qualification">Qualification:</label>
<select id="qualification" name="qualification" [(ngModel)]="user.qualification">
<option value="secondary">Secondary</option>
<option value="higher secondary">Higher Secondary</option>
<option value="bachelor">Bachelor</option>
<option value="master">Master</option>
<option value="phd">PhD</option>
</select>
</div>
<div>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" [(ngModel)]="user.dob" required>
</div>
<div>
<label>Hobbies:</label>
<label><input type="checkbox" name="hobbies" value="net surfing" [(ngModel)]="user.hobbies.netSurfing"> Net Surfing</label>
<label><input type="checkbox" name="hobbies" value="dancing" [(ngModel)]="user.hobbies.dancing"> Dancing</label>
<label><input type="checkbox" name="hobbies" value="playing" [(ngModel)]="user.hobbies.playing"> Playing</label>
<label><input type="checkbox" name="hobbies" value="reading" [(ngModel)]="user.hobbies.reading"> Reading</label>
<label><input type="checkbox" name="hobbies" value="other" [(ngModel)]="user.hobbies.other"> Other</label>
</div>
<button type="submit">Submit</button>
<button type="button" (click)="resetForm()">Cancel</button>
</form>
<!-- Display table for submitted data -->
<table *ngIf="submitted">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Mobile</th>
<th>Gender</th>
<th>Address</th>
<th>Pincode</th>
<th>Qualification</th>
<th>Date of Birth</th>
<th>Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ submittedData.firstName }}</td>
<td>{{ submittedData.lastName }}</td>
<td>{{ submittedData.email }}</td>
<td>{{ submittedData.mobile }}</td>
<td>{{ submittedData.gender }}</td>
<td>{{ submittedData.address }}</td>
<td>{{ submittedData.pincode }}</td>
<td>{{ submittedData.qualification }}</td>
<td>{{ submittedData.dob }}</td>
<td>{{ submittedData.hobbies | json }}</td>
</tr>
</tbody>
</table>
import { Component } from '@angular/core';
@Component({
selector: 'app-user-form',
templateUrl: './user-form.component.html',
styleUrls: ['./user-form.component.css']
})
export class UserFormComponent {
user: any = {};
submitted: boolean = false;
submittedData: any = {};
onSubmit() {
// Save form data and set submitted to true
this.submitted = true;
this.submittedData = { ...this.user };
}
resetForm() {
// Reset form and submitted status
this.submitted = false;
this.submittedData = {};
this.user = {};
}
}
Comments
Post a Comment