You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
5.0 KiB
94 lines
5.0 KiB
<body>
|
|
<h3>Personal Information</h3>
|
|
<div class="row container user_Form">
|
|
<div class="col-12">
|
|
<form [formGroup]='userForm' (submit)='onUserFormSubmit()'>
|
|
<div class="row userData">
|
|
<div class="col-12">
|
|
<h5>Name</h5>
|
|
<input type="text" placeholder="Enter Name" formControlName="name" />
|
|
<div *ngIf="userForm.controls['name'].invalid && (userForm.controls['name'].touched || userForm.controls['name'].dirty)">
|
|
<p>Invalid Name</p>
|
|
</div>
|
|
<BR>
|
|
<BR>
|
|
<h5>Username</h5>
|
|
<input type="text" placeholder="Enter Username" formControlName="username" />
|
|
<div *ngIf="userForm.controls['username'].invalid && (userForm.controls['username'].touched || userForm.controls['username'].dirty)">
|
|
<p>Invalid Username</p>
|
|
</div>
|
|
<BR>
|
|
<BR>
|
|
<h5>Mobile Number</h5>
|
|
<input type="text" placeholder="Enter Mobile Number" formControlName="mobileNumber" />
|
|
<div *ngIf="userForm.controls['mobileNumber'].invalid && (userForm.controls['mobileNumber'].touched || userForm.controls['mobileNumber'].dirty)">
|
|
<p>Invalid Mobile Number</p>
|
|
</div>
|
|
<BR>
|
|
<BR>
|
|
<h5>Email</h5>
|
|
<input type="email" placeholder="Enter Email Id" formControlName="emailId" />
|
|
<div *ngIf="userForm.controls['emailId'].invalid && (userForm.controls['emailId'].touched || userForm.controls['emailId'].dirty)">
|
|
<p>Invalid Email</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<BR>
|
|
<BR>
|
|
<div class="row userData">
|
|
<div class="col-12">
|
|
<h5>Location Details</h5>
|
|
<br>
|
|
<h5>Address</h5>
|
|
<input type="text" placeholder="Enter Address" formControlName="address" />
|
|
<div *ngIf="userForm.controls['address'].invalid && (userForm.controls['address'].touched || userForm.controls['address'].dirty)">
|
|
<p>Invalid Address</p>
|
|
</div>
|
|
<BR>
|
|
<BR>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<h5>City</h5>
|
|
<input type="text" placeholder="Enter City" formControlName="city" />
|
|
<div *ngIf="userForm.controls['city'].invalid && (userForm.controls['city'].touched || userForm.controls['city'].dirty)">
|
|
<p>Invalid City</p>
|
|
</div>
|
|
<BR>
|
|
<BR>
|
|
</div>
|
|
<div class="col-6">
|
|
<h5>State</h5>
|
|
<input type="text" placeholder="Enter State" formControlName="state" />
|
|
<div *ngIf="userForm.controls['state'].invalid && (userForm.controls['state'].touched || userForm.controls['state'].dirty)">
|
|
<p>Invalid State</p>
|
|
</div>
|
|
<BR>
|
|
<BR>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<h5>Country</h5>
|
|
<input type="text" placeholder="Enter Country" formControlName="country" />
|
|
<div *ngIf="userForm.controls['country'].invalid && (userForm.controls['country'].touched || userForm.controls['country'].dirty)">
|
|
<p>Invalid Country</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<h5>PinCode</h5>
|
|
<input type="text" placeholder="Enter Pin Code" formControlName="pinCode" />
|
|
<div *ngIf="userForm.controls['pinCode'].invalid && (userForm.controls['pinCode'].touched || userForm.controls['pinCode'].dirty)">
|
|
<p>Invalid PinCode</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<BR>
|
|
<BR>
|
|
<button [disabled]='!userForm.valid'>Submit</button>
|
|
</form>
|
|
<br><br><br>
|
|
</div>
|
|
</div>
|
|
</body>
|