ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormControlName, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'ReactiveForm';
reactiveForm : FormGroup ;
ngOnInit(): void {
this.reactiveForm =new FormGroup({
firstname:new FormControl<string>('',Validators.required),
lastname:new FormControl<string>('',[Validators.required]),
email :new FormControl('',[Validators.required, Validators.email]),
dob:new FormControl<number>(0),
username :new FormControl(null),
gender :new FormControl('male'),
street :new FormControl(null),
country :new FormControl ('India'),
city :new FormControl(null),
region :new FormControl(null),
postalCode:new FormControl(null)
})
}
onFormSubmitted()
{
console.log(this.reactiveForm);
}
}
html
<section class="container">
<header>Registration Form</header>
<form class="form" [formGroup]="reactiveForm" (ngSubmit)="onFormSubmitted()">
<div class="column">
<div class="input-box">
<input type="text" placeholder="First Name" formControlName="firstname" />
<small *ngIf="reactiveForm.get('firstname').invalid">*First Name is required</small>
</div>
<div class="input-box">
<input type="text" placeholder="Last Name" formControlName="lastname" />
<small *ngIf="reactiveForm.get('lastname').invalid">*Last Name is required</small>
</div>
</div>
<div class="input-box">
<input type="text" placeholder="Email" formControlName="email" />
<small *ngIf="reactiveForm.get('email').invalid">*Email is required</small>
</div>
<div class="column">
<div class="input-box">
<input type="text" placeholder="username" formControlName="username" />
<button class="btn-gen-username" type="button">
Create a Username
</button>
</div>
<div class="input-box">
<input type="date" placeholder="Date of Birth" formControlName="dob" />
</div>
</div>
<div class="gender-box">
<h3>Gender</h3>
<div class="gender-option">
<div class="gender">
<input type="radio" value="male" id="check-male" formControlName="gender" />
<label for="check-male">Male</label>
</div>
<div class="gender">
<input type="radio" value="female" id="check-female" formControlName="gender" />
<label for="check-female">Female</label>
</div>
<div class="gender">
<input type="radio" value="other" id="check-other" formControlName="gender" />
<label for="check-other">Prefer not to say</label>
</div>
</div>
</div>
<div class="input-box address">
<label>Address</label>
<input type="text" placeholder="Street address" formControlName="street"/>
<div class="column">
<div class="select-box">
<select name="country" formControlName="country">
<option hidden>Country</option>
<option>America</option>
<option selected>Japan</option>
<option >India</option>
<option>Nepal</option>
</select>
</div>
<input type="text" placeholder="City" formControlName="city" />
</div>
<div class="column">
<input type="text" placeholder="Region" formControlName="region" />
<input type="number" placeholder="Postal code" formControlName="postalCode"/>
</div>
</div>
<!--HTML for Skills Form Array -->
<!-- <div class="input-box skills" formArrayName="skills">
<h4>Add Skills</h4>
<div class="column">
<input type="text" placeholder="Add Skill...">
<button type="button" class="btn-add-delete">Delete</button>
</div>
</div>
<button type="button" class="btn-add-delete">Add Skills</button> -->
<!--HTML for Experience Form Array -->
<!-- <div class="input-box">
<div class="experience">
<label>Experience</label>
<input type="text" placeholder="Company Name" />
<div class="column">
<div class="select-box">
<select>
<option hidden>Position</option>
<option>Junior Developer</option>
<option>Software Developer</option>
<option>Senior Developer</option>
<option>Team Lead</option>
</select>
</div>
<input type="number" placeholder="Experience" />
</div>
<div class="column">
<input type="date" placeholder="Start Date" />
<input type="date" placeholder="End Date" />
</div>
<button type="button" class="btn-add-delete">Delete Experience</button>
</div>
</div>
<button type="button" class="btn-add-delete">Add Experience</button>-->
<input type="submit" value="Submit" class="submit-btn">
<!-- [disabled]="!reactiveForm.valid" -->
</form>
</section>
<!--uncomment below HTML for displaying form data-->
<!-- <section class="user-detail-container">
<div class="user-details-container">
<div class="user-avatar">
<p>JS</p>
</div>
<div class="user-details">
<div class="user-name">
<h2>John Smith</h2>
</div>
<p><b>Email:</b> johnsmith@gmail.com</p>
<p><b>Username:</b> johnsmith86 </p>
<p><b>Date of birth:</b> July 21, 1989</p>
<div class="user-name">
<h3>Address</h3>
</div>
<span>India</span>.
<span> New Delhi</span>.
<span> NCR</span>.
<span> 234565</span>
</div>
</div>
</section> -->