could you please tell me how to show validation message on button click ? here is my code
https://stackblitz.com/edit/angular-ugdbvg?file=src/app/app.component.html
I want to show required error message when user press submit button.
<form novalidate [formGroup]="searchForm" class="calform">
<section class="col-sm-6 bg-white pl-20 pr-20">
<div class="form-group col-sm-4 pl-0 error">
<label class="field-title mb-5">name<span class="color-red fontWt"> *</span></label>
<input type="text" placeholder="Enter name" formControlName="name">
<p class="message" [hidden]="searchForm.get('name')">Required</p>
</div>
<div class="form-group col-sm-4 pl-0 error">
<label class="field-title mb-5">last name <span class="color-red fontWt"> *</span></label>
<input type="text" placeholder="Enter last name" formControlName="lastName">
<p class="message" [hidden]="searchForm.get('lastName')">Required</p>
</div>
<button (click)="submitHandler()">submit</button>
</section>
</form>
js
this.searchForm = this.fb.group({
name: ['', Validators.required],
lastName: ['', Validators.required]
});
Add the following line to check:
<span class="error" *ngIf="!!searchForm.controls.name.errors.required && (!!searchForm.controls.name.dirty || !!searchForm.controls.name.touched)">
Name is required.
</span>
<span class="error" *ngIf="!!searchForm.controls.lastName.errors.required && (!!searchForm.controls.lastName.dirty || !!searchForm.controls.name.touched)">
lastName is required.
</span>
in your ts file:
submitHandler() {
if(this.searchForm.valid) {
// Logic
}
}
https://stackblitz.com/edit/angular-utvw23
You need to use *ngIf. Updated Stackblitz code . https://stackblitz.com/edit/angular-fzyrji
Try like this:
Use [hidden] or *ngIf
DEMO
<div class="form-group col-sm-4 pl-0 error">
<label class="field-title mb-5">name<span class="color-red fontWt"> *</span></label> {{show}}
<input type="text" placeholder="Enter name" formControlName="name"> {{searchForm.get('name').invalid}}
<p class="message" [hidden]="!(show && searchForm.get('name').invalid)">Required</p>
</div>
<div class="form-group col-sm-4 pl-0 error">
<label class="field-title mb-5">last name <span class="color-red fontWt"> *</span></label>
<input type="text" placeholder="Enter last name" formControlName="lastName">
<p class="message" [hidden]="!(show && searchForm.get('lastName').invalid)">Required</p>
</div>
<button (click)="show = true ; submitHandler();">submit</button>
</section>
</form>
Related
I have a basic question but i can't find the solution .
how can i force my user to check the box : accept the condition ? (j'acceptes les conditions d'utilisations = i agree terms & conditions )
here is a pictures of my form :
here is my HTML:
<section id="formDom">
<form class="column g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">Nom</label>
<input type="text" class="form-control" placeholder="Dupont" id="firstName" required>
<div class="valid-feedback">
Ok
</div>
</div>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">prénom</label>
<input type="text" class="form-control" placeholder="Jean" id="lastName" required>
<div class="valid-feedback">
Ok
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Adresse mail</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="email" class="form-control" id="email" aria-describedby="inputGroupPrepend"
placeholder="jeandupont#gmail.com" required>
<div class="invalid-feedback">
Adresse mail requise
</div>
</div>
</div>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">Ville</label>
<input type="text" class="form-control" placeholder="Paris" id="city" required>
<div class="valid-feedback">
Ok
</div>
</div>
<div class="col-md-4">
<label for="validationCustom03" class="form-label">Adresse</label>
<input type="text" class="form-control" placeholder="1 rue de Paris" id="adress" required>
<div class="invalid-feedback">
adresse réquise
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
J'accepte les conditions d'utilisations
</label>
<div class="invalid-feedback">
Vous devez accepteer les conditions d'utilisations
</div>
</div>
</div>
<div class="col-md-4">
<button id="buyBtn" class="btn btn-primary basket-btn" type="submit">Acheter</button>
</div>
</form>
</section>
Actually the user is forced to fill the form but he can submit without check the box ( accept condition )
Here is the JS :
function validForm() {
const form = document.querySelector('.needs-validation');
form.addEventListener('submit', function (event) {
event.preventDefault();
event.stopPropagation();
cameraIds = getBasket().map(item => { return item.id });
const contact = {
email: document.getElementById("email").value,
firstName: document.getElementById("firstName").value,
lastName: document.getElementById("lastName").value,
city: document.getElementById("city").value,
address: document.getElementById("adress").value,
}
createOrder(contact, cameraIds, (order, error) => {
if (error) {
alert('Merci de remplir le formulaire');
} else {
localStorage.clear();
location.assign(`confirmation.html?id=${order.orderId}`)
}
form.classList.add('was-validated');
})
})
}
validForm();
PS : i'm using BOOTSTRAP but i think you got it ^^
if(document.getElementById('invalidCheck').checked==true)
//you'r accepted the terms
else
//you should accept the terms
You can check if a checkbox is checked or not by testing the checked property of the input element:
var isChecked = document.querySelector('input[type="checkbox"]').checked;
if(!isChecked) {
alert("You must accept the terms before proceeding");
}
In your case, it will be:
var isChecked = document.querySelector('.needs-validation .form-check-input').checked;
You can check for document.getElementById("").checked
add purchase html
<div class="d-flex justify-content-center align-items-center">
<div class="col-md-12 border">
<div class="card-header header-elements-inline">
<h4 class="card-title">Add Purchase</h4>
<button [mat-dialog-close]="true" type="button" class="bootbox-close-button close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<form action="" #addPurchaseForm="ngForm" class="purchaseForm" (ngSubmit)="addPurchase(addPurchaseForm)" method="POST">
<div class="card-body">
<div class="col-md-12">
<div class="row justify-content-center">
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Select vendor to add product</label>
<ng-select [items]="vendorData" bindLabel="vendor_name" bindValue="vendor_id" name="vendor_name" #vendor_name="ngModel"
[searchable]="false" required appendTo="body" [closeOnSelect]="true" [(ngModel)]="purchaseDetails.vendor_id">
</ng-select>
<span *ngIf="addPurchaseForm.submitted && vendor_name.errors?.required" class="form-text text-danger">Product Sub
Vendor
is
Required</span>
</div>
</div>
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Reciept No</label>
<input [(ngModel)]="purchaseDetails.reciept_no" name="reciept_no" #reciept_no="ngModel" type="text" required class="form-control">
<span *ngIf="addPurchaseForm.submitted && reciept_no.errors?.required" class="form-text text-danger">Product code
is
Required</span>
</div>
</div>
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Purchased At</label>
<mat-form-field>
<input [(ngModel)]="purchaseDetails.purchased_at" name="purchased_at" #purchased_at="ngModel" required class="form-control" matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<!-- <input [(ngModel)]="purchaseDetails.purchased_at" name="purchased_at" #purchased_at="ngModel" type="text" required class="form-control"> -->
<span *ngIf="addPurchaseForm.submitted && purchased_at.errors?.required" class="form-text text-danger">Product code
is
Required</span>
</div>
</div>
</div>
<h4 class="card-title">Purchase Details</h4>
<mat-dialog-content style="max-height:200px">
<div class="row" *ngFor="let purchaseDetail of purchaseDetails; let i = index;">
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Select Product</label>
<ng-select [items]="productData" bindLabel="product_name" bindValue="product_id" name="vendor_name" #product[i]="ngModel"
[searchable]="false" required appendTo="body" [closeOnSelect]="true" [(ngModel)]="purchaseDetails[i].product_id">
</ng-select>
<span *ngIf="addPurchaseForm.submitted && vendor_name.errors?.required" class="form-text text-danger">Product Sub
Vendor
is
Required</span>
</div>
</div>
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Unit Rate</label>
<input mask="0*.0*" value="{{purchaseDetails[i].rate}}" [(ngModel)]="purchaseDetails[i].rate" name="product_rate" #rate[i]="ngModel" type="text" required class="form-control">
<span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Rate
is
Required</span>
</div>
</div>
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Quantity</label>
<input mask="0*" value="{{purchaseDetails[i].quantity}}" [(ngModel)]="purchaseDetails[i].quantity" name="product_quantity" #quantity[i]="ngModel" type="text" required class="form-control">
<span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Quantity
is
Required</span>
</div>
</div>
<!-- <div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Price</label>
<input disabled [(ngModel)]="purchaseDetails[i].quantity * purchaseDetails[i].rate" name="product_price" #price="ngModel" type="text" required
class="form-control">
<span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Price
is
Required</span>
</div>
</div> -->
<div class="col-md-1 align-self-md-center">
<i (click)="removePurchaseDetail(i)" class="icon-minus-circle2 cursor-pointer fs-22 text-danger"></i>
</div>
</div>
</mat-dialog-content>
<div class="row justify-content-center mb-25">
<i (click)="addNewPurchaseDetail()" class="icon-plus-circle2 fs-22 cursor-pointer text-indigo-800"></i>
</div>
</div>
<div class="text-center">
<button type="submit" [disabled]="!purchaseDetails.vendor_id" class="btn btn-primary">Add purchase <i class="icon-paperplane ml-2"></i></button>
</div>
</div>
</form>
</div>
</div>
Add purchase component
import { Component, OnInit, Inject } from '#angular/core';
import { MAT_DIALOG_DATA } from '#angular/material';
import { NgForm } from '#angular/forms';
#Component({
selector: 'app-add-purchase',
templateUrl: './add-purchase.component.html',
styleUrls: ['./add-purchase.component.css']
})
export class AddPurchaseComponent implements OnInit {
purchaseDetails : any = [{
product_id : '',
rate : '',
price : '',
quantity : ''
}];
vendorData : any;
productData : any;
constructor(#Inject(MAT_DIALOG_DATA) private addPurchaseData : any) { }
ngOnInit() {
console.log(this.addPurchaseData);
console.log(this.purchaseDetails);
this.vendorData = this.addPurchaseData.vendors;
this.productData = this.addPurchaseData.products;
}
addNewPurchaseDetail(){
console.log(this.purchaseDetails);
this.purchaseDetails.push({
product_id: '',
rate: '',
price: '',
quantity: ''
});
}
removePurchaseDetail(index){
this.purchaseDetails.splice(index, 1);
}
}
while adding new purchase details row
i'am able to get the row but my values are resetting
i don't know what i am doing wrong
Is there any right way to achieve this
I am new to angular pls guide me through this
when i console logged the model values it was there but i don't know why the rows has been resetted
Found the issue:
Input name should be like this:
<input name="reciept_no[{{i}}]" [(ngModel)]="purchaseDetails.reciept_no" #reciept_no="ngModel" type="text" required class="form-control">
I had like this :
<input name="reciept_no" [(ngModel)]="purchaseDetails.reciept_no" #reciept_no="ngModel" type="text" required class="form-control">
I have to check validation on two fields with ng-change. The selected values cannot be same so i have implemented below logic but this function is not even being called. Its been hours and i cannot figure out what i am doing wrong. Please check if logic is being implemented correctly.
So far tried code....
main.html
<div class="panel-body">
<form name="addAttesForm" id="addAttesForm" novalidate k-validate-on-blur="false">
<div class="row">
<div class="form-group col-md-6">
<label for="roleType" class="col-md-4">Role Type:</label>
<div class="col-md-8">
<select
kendo-drop-down-list
data-text-field="'text'"
data-value-field="'id'" name="roleType"
k-option-label="'Select'"
k-data-source="roleTypeDataSource"
ng-model="attestorDTO.riskAssessmentRoleTypeKey"
id="roleType">
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="attestorWorker" class="col-md-4">Attestor:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" readonly="readonly"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="proxyWorker" class="col-md-4">Proxy :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" readonly="readonly"/>
<p class="text-danger" ng-show="addAttesForm.proxyWorker.$error.dateRange">Attestor and Proxy can not be same</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary pull-right" type="button" ng-disabled="addAttesForm.$invalid" ng-click="saveAttestor()">Add attestor</button>
</div>
</div>
</form>
</div>
main.js
$scope.validateProxy = function(startField, endField) {
console.log("calling validation...");
var isValid = ($scope.attestorDTO[startField]) <= ($scope.attestorDTO[endField]);
$scope.addAttesForm[endField].$setValidity('dateRange',isValid);
$scope.addAttesForm.$setValidity('dateRange',isValid);
};
Remove the readonly attribute. ng-change will not fire on the readonly input elements and the model should be changed via the UI not by the javascript code.
Try like this:
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" />
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" />
I am trying to create a simple for that then passes the data into a querystring.
ie capturing:
first name
last name
email
Which when submitted with give soemthing like:
http://www.url.com?FirstName=John&LastName=Smith&johnsmith#url.com
I thought I would try 2 way binding and add the querystrings via the action but obviously this gave me an error. I don't need to save this data trust transfer it from a small form to the main application.
I also tried doing this all on submit which works however the link is still clickable when the form is blank. Any suggestions would be very welcome.
<form class="form" name="appForm" novalidate action="https://www.url.com?FirstName={{firstname}}" method="Post">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 flowuplabels">
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appfirstname" class="fieldLabel fl_label">
First name<span class="text-danger">*</span>
</label>
<input type="text" name="appfirstname" id="appfirstname" class="form-control fl_input" data-ng-model="firstname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="applastname" class="fieldLabel fl_label">
Last name<span class="text-danger">*</span>
</label>
<input type="text" name="applastname" id="applastname" class="form-control fl_input" data-ng-model="lastname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appemail" class="fieldLabel fl_label">
Email<span class="text-danger">*</span>
</label>
<input type="email" name="appemail" id="appemail" class="form-control fl_input" data-ng-model="email" ng-required />
<span class="form-bar"></span>
<p ng-show="appForm.appemail.$invalid && !appForm.appemail.$pristine" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="form-group">
<button id="btnSend" class="btn btn-red" ng-disabled="!firstname || !lastname || !email">Join us</button>
</div>
</div>
</div>
</div>
</div>
</form>
Typical as soon as I ask I solve
should have used get and just put the url ie:
It will then ass the query string using the input name as the query name so much simpler that what I was trying to do
I'm pretty new to AngularJS and trying to build a contact form. I did some research to validate with angular, this works fine. However sending the input to my email account is still a mystery.
HTML Snippet
<form name="contactForm" ng-submit="submitForm(contactForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
<input type="text" name="name" class="form-control" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required>
<p ng-show="contactForm.name.$error.minlength" class="help-block">Je naam lijkt iets te kort, vul ook je achternaam in!</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<input type="email" name="email" class="form-control" ng-model="formData.email" placeholder="Email adres" required>
<p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Voer een geldig email adres in</p>
</div>
<!-- TEL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.tel.$invalid && !contactForm.tel.$pristine }">
<input type="tel" name="tel" class="form-control" ng-model="formData.tel" placeholder="Telefoonnummer" min-length="10" required>
<p ng-show="contactForm.tel.$error.minlength" class="help-block">Je telefoonnummer lijkt iets te kort, misschien mis je iets als "+31" of "043"</p>
</div>
<!-- TEXT -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.text.$invalid && !contactForm.text.$pristine }">
<textarea name="text" class="form-control" ng-model="formData.text" placeholder="Formuleer uw situatie kort. Geef ook aan op welke dagen u beschikbaar bent of gebeld wenst te worden." ng-minlength="10" required></textarea>
<p ng-show="contactForm.text.$error.minlength" class="help-block">Vertel ons iets meer...</p>
</div>
<!-- SUBMIT BUTTON -->
<input type="submit" ng-submit="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak">
<!-- <pre>
{{formData}}
</pre> -->
</form>
Controller
.controller('MainCtrl', function($scope, $http) {
this.features = keys;
$scope.submitForm = function(isValid) {
if (isValid) {
$scope.formData = {};
$scope.processForm = function() {
$http({
method : 'POST',
url : 'process.php',
data : $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
};
}
};
})
The process.php file is still empty since I'm not quite sure what to put here.
Regarding your form submission setup, you cannot put the ng-submit on any input[type="submit"] elements, instead you put ng-click. Also, according to the angular docs, when you have a ng-submit on the form, and an ng-click on any input[type="submit"] elements, the ng-click handlers will get called first, THEN the ng-submit handler will get called (your controller is set up for the opposite order).
But in your case, two submit handlers is unneccessary, as you can do all your validation with angular directives, and just use an ng-click. Theres an example plunker here.
HTML:
<div ng-controller="MainCtrl">
<form name="contactForm" novalidate>
<!-- NAME -->
<div ng-class="{'form-error':contactForm.name.$dirty && contactForm.name.$invalid, 'form-group':true}">
<input type="text" name="name" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required="" />
<div ng-messages="contactForm.name.$error" ng-show="contactForm.name.$dirty" >
<div ng-message="minlength">Name too short</div>
<div ng-message="required">Required Name</div>
</div>
</div>
<!-- EMAIL -->
<div ng-class="{'form-error':contactForm.email.$dirty && contactForm.email.$invalid, 'form-group':true}">
<input type="email" name="email" ng-model="formData.email" placeholder="Email adres" required />
<div ng-messages="contactForm.email.$error" ng-show="contactForm.email.$dirty">
<div ng-message="email">Invalid Email</div>
<div ng-message="required">Required Email</div>
</div>
</div>
<!-- TEL -->
<div ng-class="{'form-error':contactForm.tel.$dirty && contactForm.tel.$invalid, 'form-group':true}">
<input type="text" name="tel" ng-pattern=/\d{3}-\d{3}-\d{4}/ ng-model="formData.tel" placeholder="Telefoonnummer" required />
<div ng-messages="contactForm.tel.$error" ng-show="contactForm.tel.$dirty">
<div ng-message="pattern">Valid form: XXX-XXX-XXXX</div>
<div ng-message="required">Required Phone</div>
</div>
</div>
<!-- SUBMIT BUTTON -->
<input type="submit" ng-click="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak" />
</form>
</div>
JavaScript:
.controller('MainCtrl', function($scope, $http) {
$scope.formData = {};
$scope.processForm = function() {
alert('valid form!')
$http({
method : 'POST',
url : 'process.php',
data : $scope.formData,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
};
});
Regarding the submission to your email, the $http service will post your data using the http protocol, so you cannot send it directly to you email, as email does not use the HTTP protocol for communication. You Could send the post data to your server, and have the server send the email (e.g. if you use Node you can use nodemailer package to send the email).
Just copy below code in your angularJs Project it will work fine
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row" style="margin-bottom:15px;">
<div class="col-md-12">
<div class="col-md-offset-1 col-md-6" id="box">
<h2 class="colr">Contact Us!</h2>
<hr>
<form class="form-horizontal" name="contactForm" ng-submit="submitContactForm(ContactDetails)" novalidate>
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<div class="col-md-12" ng-class="{ 'has-error' : contactForm.first_name.$invalid && !contactForm.first_name.$pristine }">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="Name" ng-model="ContactDetails.FirstName" class="form-control" type="text" required>
</div>
<span ng-show="contactForm.first_name.$invalid && !contactForm.first_name.$pristine" class="help-block">Username is required.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-12" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" ng-model="ContactDetails.Email" class="form-control" type="text" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/">
</div>
<span ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block"> Enter a valid email.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-class="{ 'has-error' : contactForm.phone.$invalid && !contactForm.phone.$pristine }">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" ng-model="ContactDetails.PhoneNumber" name="phone" ng-maxlength="10" ng-minlength="10" placeholder="9845640899" required>
</div>
<span ng-show="contactForm.phone.$invalid && !contactForm.phone.$pristine">Phone Number is required.</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.subject.$invalid && !contactForm.subject.$pristine }">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
<input name="subject" ng-model="ContactDetails.Subject" placeholder="Enter Subject" class="form-control" type="text" required>
</div>
<span ng-show="contactForm.subject.$invalid && !contactForm.subject.$pristine" class="help-block">Subject is required.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-class="{ 'has-error' : contactForm.comment.$invalid && !contactForm.comment.$pristine }">
<div class="col-md-12 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" ng-model="ContactDetails.Comment" rows="6" name="comment" placeholder="Message" ng-maxlength="255" ng-minlength="10" required></textarea>
</div>
<span ng-show="contactForm.comment.$invalid && !contactForm.comment.$pristine" class="help-block"> Enter a Message.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-warning pull-right" ng-disabled="contactForm.$invalid">Send<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>