AngularJS Formular: FormName. $ Gültig ist immer wahr

Question

Ich habe ein Formular in meiner eckigen Anwendung und der HTML-Code ist wie folgt, aber formName. $ Gültig ist immer wahr, auch wenn die Eingabefelder leer sind.

<form name="contactForm" novalidate ng-submit="processForm(formData)" autocomplete="off"> 
      <div id="name-group" class="form-group"> 
       <input type="text" name="contactName" class="form-control" placeholder="Name*" ng-model="formData.contactName"> 
       <!--<span class="help-block" ng-show="errorName"></span>--> 
      </div> 
      <div id="email-group" class="form-group"> 
       <input type="email" name="contactEmail" class="form-control" placeholder="Email*" ng-model="formData.contactEmail"> 
       <!--<span class="help-block" ng-show="errorSuperhero"></span>--> 
      </div> 
      <div id="phone-group" class="form-group"> 
       <input type="tel" name="contactPhone" class="form-control" placeholder="Phone*" ng-model="formData.contactPhone"> 
       <!--<span class="help-block" ng-show="errorPhone"></span>--> 
      </div> 
      <div id="content-group" class="form-group"> 
       <textarea rows="5" cols="50" name="contactMessage" class="form-control" placeholder="Message" ng-model="formData.contactMessage"></textarea> 
       <!--<span class="help-block" ng-show="errorContent"></span>--> 
      </div> 
      <div class="btn-block"> 
       <button type="submit" ng-disabled="contactForm.formData.$invalid" class="btn btn-success btn-lg"> 
        <span class="glyphicon glyphicon-share-alt"></span> Submit! 
       </button> 
       <button ng-disabled="contactForm.formData.$dirty" type="reset" class="btn btn-info btn-lg"> 
        <span class="glyphicon glyphicon-refresh"></span> Reset! 
       </button> 
      </div> 
</form> 

Kann mir bitte jemand dabei helfen?

Answer 1

Sie haben keine Validierung für eines der Elemente festgelegt, daher ist das Formular immer gültig. Wenn Sie möchten, dass ein Feld nicht leer ist, können Sie es folgendermaßen schreiben:

<input type="text" name="contactName" class="form-control" placeholder="Name*" ng-model="formData.contactName" required>