rajukottedi/portfolio.web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contact form validations on submit

Browse Source
This commit is contained in:
Bangara Raju Kottedi 2024-05-05 15:54:26 +05:30
parent fc5de6587b
commit fd43f9c1e6
3 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/contact/contact.component.html
View File

@ -16,27 +16,27 @@
<h3 class="h3 form-title">Contact Form</h3> <h3 class="h3 form-title">Contact Form</h3>
<form class="form" #messageForm="ngForm" (ngSubmit)="sendMessage()"> <form class="form" #messageForm="ngForm" (ngSubmit)="sendMessage(messageForm)" autocomplete="off">
<div class="input-wrapper"> <div class="input-wrapper">
<div> <div>
<input type="text" name="fullname" maxlength="20" #fullName="ngModel" autocomplete="off" [(ngModel)]="messageModel.name" class="form-input" placeholder="Full name" required> <input type="text" name="fullname" maxlength="20" #fullName="ngModel" autocomplete="new" [(ngModel)]="messageModel.name" class="form-input" placeholder="Full name" required>
<em class="error" *ngIf="fullName.errors?.['required'] && fullName.touched">Full name is required</em> <em class="error" *ngIf="(fullName.errors?.['required']) && fullName.touched">Full name is required</em>
</div> </div>
<div> <div>
<input type="email" name="email" email #email="ngModel" autocomplete="off" [(ngModel)]="messageModel.fromEmail" class="form-input" placeholder="Email address" required> <input type="email" name="email" email #email="ngModel" autocomplete="new" [(ngModel)]="messageModel.email" class="form-input" placeholder="Email address" required>
<em class="error" *ngIf="email.errors?.['email'] && email.touched">Must be a valid email format</em> <em class="error" *ngIf="(email.errors?.['email'] && !email.errors?.['required']) && email.touched">Must be a valid email format</em>
<em class="error" *ngIf="email.errors?.['required'] && email.touched">Email is required</em> <em class="error" *ngIf="(email.errors?.['required']) && email.touched">Email is required</em>
</div> </div>
</div> </div>
<div class="text-area"> <div class="text-area">
<textarea name="message" #message="ngModel" autocomplete="off" maxlength="500" [(ngModel)]="messageModel.content" class="form-input" placeholder="Your Message" required></textarea> <textarea name="message" #message="ngModel" autocomplete="off" maxlength="500" [(ngModel)]="messageModel.content" class="form-input" placeholder="Your Message" required></textarea>
<em class="error" *ngIf="message.errors?.['required'] && message.touched">Message is required</em> <em class="error" *ngIf="(message.errors?.['required']) && message.touched">Message is required</em>
</div> </div>
<button class="form-btn" type="submit" [disabled]="messageForm.form.invalid && messageForm.form.touched"> <button class="form-btn" type="submit" [disabled]="messageForm.form.invalid && submitted">
<i class="fa-regular fa-paper-plane"></i> <i class="fa-regular fa-paper-plane"></i>
<span>Send Message</span> <span>Send Message</span>
</button> </button>

34
src/app/contact/contact.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
import { CvService } from '../services/cv.service'; import { CvService } from '../services/cv.service';
import { IContact } from './contact.model'; import { IContact } from './contact.model';
import { FormBuilder, FormControl, NgForm } from '@angular/forms';
@Component({ @Component({
selector: 'app-contact', selector: 'app-contact',
@ -8,21 +9,42 @@ import { IContact } from './contact.model';
styleUrl: './contact.component.scss' styleUrl: './contact.component.scss'
}) })
export class ContactComponent { export class ContactComponent {
messageModel: IContact = {name: '', fromEmail: '', content: '' }; messageModel: IContact = {name: '', email: '', content: '' };
candidateId: number = 1; candidateId: number = 1;
messageSentError: boolean = false; messageSentError: boolean = false;
messageSentSuccess: boolean = false; messageSentSuccess: boolean = false;
submitted: boolean = false;
constructor(private svc: CvService){ constructor(private svc: CvService, private formBuilder: FormBuilder){
} }
sendMessage() :void{ sendMessage(messageForm: NgForm) :void{
this.messageSentError = false; this.submitted = true;
this.messageSentSuccess = false; if(messageForm.valid){
this.messageSentError = false;
this.messageSentSuccess = false;
this.svc.sendMessage(this.messageModel, this.candidateId).subscribe({ this.svc.sendMessage(this.messageModel, this.candidateId).subscribe({
next: (response) => this.messageSentSuccess = response, next: (response) => this.messageSentSuccess = response,
error: () => this.messageSentError = true error: () => this.messageSentError = true
}); });
}
else{
this.validateAllFormFields(messageForm);
}
}
validateAllFormFields(formGroup: NgForm) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.controls[field];
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof NgForm) {
this.validateAllFormFields(control);
}
});
} }
} }

2
src/app/contact/contact.model.ts
View File

@ -1,5 +1,5 @@
export interface IContact{ export interface IContact{
name: string; name: string;
fromEmail: string; email: string;
content: string; content: string;
} }