Angularjs form-validation - angularjs

Question

i want that no body can save form without providing a name and here is my Html code ..what i am doing wrong i dont know ..i have checked many solutions please give me a reason...i want to know that how i will provide front-end validation
<div class="vbox wrapper" ng-controller="CalendarAddController">
<form id ="frmType" name="frmType" class="form-horizontal form-validation" novalidate method="get">
<div class="wrapper-v b-b col-lg-8 col-md-9 col-sm-10 col-xs-12" style="padding-bottom:5px;">
<div class="btn-toolbar pull-right ">
<a ui-sref="admin.calendar.entity" class="btn btn-xs btn-default">
Cancel
</a>
<a class="btn btn-xs btn-primary " ng-click="frmType.$valid && save()">Save</a>
</div>
<div class="h4 text-black">Add Calendar</div>
</div>
<h1> </h1>
<div class="wrapper-v col-lg-8 col-md-9 col-sm-10 col-xs-12" style="padding-bottom:5px;">
<div class="btn-toolbar pull-right">
</div>
<h4 class="wrapper text-muted">Calendar</h4>
</div>
<div class="wrapper-md" style="clear:both;">
<div class="form-group">
<label class="col-sm-2 control-label ">Name</label>
<div class="col-sm-8 col-lg-6">
<input type="text" name="name" ng-model="calendar.name"
placeholder="Enter calendar name" ng-minlength="1" ng-maxlength="15" class="form-control" ng-required="true" >
<span class="error code">{{errMsg}}</span>
<p class="help-block error-pattern">
Must start with a letter, may contain alphabets, digits and underscore.
</p>
<p class="error error-minlength">
Must be at least 1 character long.
</p>
<p class="error error-maxlength">
Length of "Name" field must not exceed 15 characters.
</p>
<span ng-show="frmType.name.$error.required && frmType.$submitted">Please provide role name</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-8 col-lg-6">
<input type="text" placeholder="Enter description" ng-maxlength="100"
ng-model="calendar.description" class="form-control" />
<p class="error error-maxlength">
Must not exceed 100 characters.
</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label ">Starting Day of Week</label>
<div class="col-sm-1 col-lg-1 dd-width">
<select name="startingDay" class="form-control" ng-model="calendar.weekStartDay">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Working days & Timings</label>
<div class="col-md-8 col-lg-6">
<h4 class="row text-bold">
<span class="col-md-12">
<span class="col-md-3">
Working Days
</span>
<span class="col-md-6 ">
Timing
</span>
</span>
</h4>
<div class="row text-bold" ng-repeat="calDay in calDays" >
<div class="col-md-12">
<div class="col-md-3">
<div class="checkbox">
<label class="i-checks i-checks-xs ">
<input type="checkbox" checklist-model="calendar.workingDays" ng-model="calDay.enabled"
checklist-value="calDay.dayNum" ng-change="selectDay(calDay.dayNum)" ><i></i>{{calDay.dayName}}
</label>
</div>
</div>
<div class="col-md-6">
{{timingDay=corrTimingDay(calDay.dayNum);""}}
<div class="row" >
<button class="btn btn-link" ng-disabled="!calDay.enabled" ng-click="open(timingDay)"
style="margin-bottom:-12px;">Add time block</button>
<span class="tooltipText"></span>
</div>
<div class="timing-chips" ng-repeat="timingBlock in timingDay.timingBlocks">
<span>{{intval(timingBlock.startTime/60)}}:{{makestr(timingBlock.startTime%60)}}
{{ampm(timingBlock.startTime)}} to
{{intval(timingBlock.endTime/60)}}:
{{makestr(timingBlock.endTime%60)}} {{ampm(timingBlock.endTime)}}</span>
<span class="hour">[{{totalTime(timingBlock.startTime,timingBlock.endTime)}} Hour]</span>
<i class="remove fa fa-remove no-padder" ng-click="timingDay.timingBlocks
.splice(timingDay.timingBlocks.indexOf(timingBlock),1)">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper-md " style="clear:both;">
<div class="wrapper-v col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<h4 class="wrapper text-muted cls-space ">Holidays
<span class="btn-toolbar pull-right">
<a class="btn btn-xs btn-primary " ng-click="holidayOpen('lg')">Apply Holidays
</a> <input id="filter" type="text" ng-model="filterValue"
ng-change="filterTable()" placeholder="search"
class="form-control toolbar-item input-group w-xs inline m-l-xs" />
</span>
</h4>
</div>
<div class="col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<div class="wrapper-v-md" style="clear: both;">
<table datatable="ng" dt-options="dtOptionsHoliday" class="table table-striped clickable b-a table-condensed" >
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="holiday in calendarHolidays">
<td>{{holiday.name}}</td>
<td>{{holiday.description}}</td>
<td>{{holiday.date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="wrapper-v col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<h4 class="wrapper text-muted cls-space">Exceptions
<span class="btn-toolbar pull-right">
<a class="btn btn-xs btn-primary " ng-click="exceptionOpen('lg')">Apply Exceptions
</a> <input id="filter" type="text" ng-model="filterValue"
ng-change="filterTable()" placeholder="search"
class="form-control toolbar-item input-group w-xs inline m-l-xs" />
</span>
</h4>
</div>
<div class="col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<div class="wrapper-v-md table-space" style="clear: both;">
<table datatable="ng" dt-options="dtOptionsException" class="table table-striped clickable b-a table-condensed" >
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="exception in calendarExceptions">
<td>{{exception.name}}</td>
<td>{{exception.description}}</td>
<td>{{exception.date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></form>
<!-- <pre>{{calendar |json}}</pre> -->
</div>

Answer 1

Can you just use required and see if it helps?
<input type="text" name="name" required>

Answer 2

Just adding onto #thepio's answer while you do that
<input type="text" name="name" ng-model="calendar.name"
placeholder="Enter calendar name" required >
<input type="submit" ng-disabled="!frmType.$valid">
The last line will disable your submit button until user types something in it.
If you want to check for if all letters were words I suggest using ng-pattern.
An example of what I used in my code
<div class="form-group">
<label class="control-label">Executive Name</label>
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Executive Name" name="execName" ng-model="user.execName" ng-pattern="/^[A-z ]*$/" required />
<span class="error" ng-show="createForm.execName.$error.required && createForm.execName.$touched">required</span>
<span class="error" ng-show="createForm.execName.$error.pattern && createForm.execName.$dirty">Must start with a letter, and contain letters only.</span>
</div>

Answer 3

you can use ng-message validation like:
<form name="form" validate>
<input id="name" name="name" md-maxlength="25"
ng-model="name" required autocomplete="false">
<div ng-messages="form.name.$error">
<div ng-message="required">Name field can not empty</div>
</div>
</form>
here if the full document about this.