Hi
How to put validations. I am using Reactive form
<div class="modal" id="myModal" #myModal>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">New Employee</h1>
<button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button>
</div>
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input
formControlName="empName"
id="empName"
type="text"
class="form-control">
<!-- <div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger">
<div *ngIf="f['name'].errors && f['name'].errors['required']">Name is required.</div>
<div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be 3 character.</div>
</div> -->
<label for="email">Email</label>
<input
formControlName="email"
id="email"
type="text"
class="form-control">
<label for="empContactNo">Contact No</label>
<input
formControlName="empContactNo"
id="empContactNo"
type="text"
class="form-control">
<!-- <div *ngIf="f['email'].touched && f['email'].invalid" class="alert alert-danger">
<div *ngIf="f['email'].errors && f['email'].errors['required']">Email is required.</div>
<div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be 3 character.</div>
</div> -->
<label for="addressLine1">Address1</label>
<input
formControlName="addressLine1"
id="addressLine1"
type="text"
class="form-control">
<label for="addressLine2">Address2</label>
<input
formControlName="addressLine2"
id="addressLine2"
type="text"
class="form-control">
<label for="pinCode">Pin Code</label>
<input
formControlName="pinCode"
id="pinCode"
type="text"
class="form-control">
<label for="city">City</label>
<input
formControlName="city"
id="city"
type="text"
class="form-control">
<label for="state">State</label>
<input
formControlName="state"
id="state"
type="text"
class="form-control">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">Save</button>
<!-- <button class="btn btn-primary" ng-click="cancel()">Cancel</button> -->
</div>
</form>
</div>
</div>
</div>
employeeArray: any[] = [];
objEmployee: any = {
"empId":0,
"empName": "",
"empContactNo": "",
"empEmail": "",
"addressLine1": "",
"addressLine2": "",
"pinCode":"",
"city": "",
"state": "",
}
constructor(private empSrv:EmployeeService){}
form = new FormGroup({
empName: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
empContactNo: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
email: new FormControl('', [Validators.required, Validators.email]),
addressLine1: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
addressLine2: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
pinCode: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
city: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
state: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),])
});
get f(){
return this.form.controls;
}
Thanks