Angularjs form-validation

Question

Я хочу, чтобы ни одно тело не могло сохранять форму без предоставления имени, и вот мой код HTML. Что я делаю неправильно, я не знаю ..и проверили множество решений, пожалуйста, объясните мне ... я хочу знать, что, как я обеспечит фронтального проверку

<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>&nbsp;</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)}} &nbsp; to &nbsp; 
            {{intval(timingBlock.endTime/60)}}: 
            {{makestr(timingBlock.endTime%60)}} {{ampm(timingBlock.endTime)}}</span>&nbsp; 
           <span class="hour">[{{totalTime(timingBlock.startTime,timingBlock.endTime)}} Hour]</span> 
           &nbsp;&nbsp;<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

вы можете просто использовать required и посмотреть, поможет ли это?

<input type="text" name="name" required> 

Answer 2

Просто добавить на @ thepio Ответим в то время как вы делаете, что

<input type="text" name="name" ng-model="calendar.name" 
       placeholder="Enter calendar name" required > 
<input type="submit" ng-disabled="!frmType.$valid"> 

Последняя строка не будет отключить кнопку отправки, пока пользователь вводит что-то в нем.

Если вы хотите проверить, были ли все буквы словами, я предлагаю использовать ng-pattern.

Пример того, что я использовал в своем коде

<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

вы можете использовать проверку нг-сообщение как:

<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> 

здесь, если полный document об этом.