Почему проверка HTML5 поля не работает в повторе ng?

Я пытаюсь решить эту проблему в течение некоторого времени, но без везения. Я читаю целые дневные примеры, такие как this или this о проверке внутри ng-repeat, но я не могу найти ничего, что могло бы объяснить мне причину, по которой мой код не работает.Почему проверка HTML5 поля не работает в повторе ng?

У меня есть форма с полями внутри ng-repeat, и все они используют требуемый параметр, например.

Когда я запускаю кнопку обновления, проверка не работает. Если у меня такая же форма без ng-repeat, всплывающие окна проверки отображаются нормально (если что-то не соответствует входным критериям). Я использовал этот код:

ng-click="contactForm.$valid && updateContact(contact)"

Код, похоже, не влияет на форму с ng-repeat. Если возможно, я хотел бы получить HTML 5 валидацию pop-up:

на пустое поле (или если регулярное выражение не совпадает с вводом), когда я нажимаю кнопку обновления. Я не хочу иметь поля, которые говорят, что требуется или отключить кнопку обновления, потому что какое-то поле неверно.

Plunker

источник

2017-02-02 Basic Guy

уронить ng-form="contactForm" от <div> и завернуть, что ng-repeat="con in contact" внутри <form name="contactForm"></form> элемента.

И для вашей кнопки обновления вы можете добавить ng-disabled="contactForm.$invalid".

источник

2017-02-02 20:32:39

вход должен иметь ' name' atttribute too;) – AlainIb

Я обновлял plunkr с тем же мышлением, что вы советуете, но у него есть пустой «contactForm. $ error»: https://plnkr.co/edit/oVfvkoXgltebHQTyelev?p=preview – AlainIb

@Mikko Viitala Спасибо за быстрый ответ и помощь, меня интересует, можете ли вы добиться того, чтобы HTML5 требовал всплывающего окна, указывающего на поле? Если нет, то решение, которое вы предоставили, будет в порядке. Но я хотел иметь, возможно, лучший визуальный стиль. В любом случае, я проголосовал за вас обоих. Спасибо. –

, как Микко говорит + добавить "имя" attribut для каждого входа:

https://plnkr.co/edit/oVfvkoXgltebHQTyelev?p=preview

<!DOCTYPE html> 
    <html> 

    <head> 
     <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/> 
     <script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
     <link rel="stylesheet" href="style.css"/> 
     <script src="script.js"></script> 
    </head> 

    <body ng-app="app" ng-controller="Ctrl"> 


    <div ng-init=" editContact(); getAllCities(); getAllCountries();" class="container"> 
     <div class="btn-group btn-group-justified"> 
      <div class="pull-left"> 
       <div class="btn-group"> 
        <button type="button" class="btn btn-primary" ng-click="goContacts()">Contacts</button> 
       </div> 
      </div> 

     </div> 
     <div></div> 
     <form name="contactForm"> 
      <div ng-repeat="con in contact"> 
       <div ng-if="$index == 0"> 

        <div hidden> 
         <input type="text" placeholder="First name" name="firstname" ng-model="con.id" required> 
        </div> 

        <div> 
         <label class="lbl"><b>First name</b></label> 
        </div> 
        <div> 
         <input type="text" placeholder="First name" name="firstname" ng-model="con.first_name" required> 
        </div> 

        <div> 
         <label class="lbl"><b>Last name</b></label> 
        </div> 
        <div> 
         <input type="text" placeholder="Last name" name="lastname" ng-model="con.last_name" required> 
        </div> 

        <div> 
         <label class="lbl"><b>Phone</b></label> 
        </div> 
        <div> 
         <input type="text" placeholder="Phone" name="phone" ng-model="con.phone" required> 
        </div> 

        <div> 
         <label class="lbl"><b>Email</b></label> 
        </div> 
        <div> 
         <input type="text" placeholder="Email" name="email" ng-model="con.email" required> 
        </div> 

       </div> 


       <div ng-if="$index == 1"> 

        <div> 
         <label class="lbl"><b>Street name</b></label> 
        </div> 
        <div> 
         <input type="text" placeholder="Street name" name="streetname" ng-model="con.street" required> 
        </div> 


        <div> 
         <label class="lbl"><b>Street number</b></label> 
        </div> 
        <div> 
         <input type="text" placeholder="Street number" name="streetnumber" ng-model="con.street_no" required> 
        </div> 

       </div> 

       <div ng-if="$index == 2"> 
        <div> 
         <label class="lbl"><b>City id </b></label> 
        </div> 
        <div> 
         <input type="text" placeholder="City id" name="cityd" ng-model="con.id" required> 
        </div> 

        <div> 
         <label class="lbl"><b>Zip code</b></label> 
        </div> 
        <div> 
         <input type="text" placeholder="Street number" name="citystreet" ng-model="con.zip_code" required> 
        </div> 
       </div> 
      </div> 


      <div class="container1"> 
       <label class="lbl"><b>Select city</b></label> 

       <select id="City" name="City" class="form-control" ng-model="selectedValue1"> 
        <option ng-repeat="city in chooseCities" value="{{city.id}} "> 
         {{city.name}} 
        </option> 
       </select> 

      </div> 

      <div class="container1"> 
       <label class="lbl"><b>Select country</b></label> 

       <select id="Country" name="Country" class="form-control" ng-model="selectedValue2"> 
        <option ng-repeat="country in chooseCountries" value="{{country.id}}"> 

         {{country.name}} 
        </option> 
       </select> 

      </div> 
     </form> 
    </div> 

    <div class="container1" style="background-color:rgb(241, 241, 241)"> 
     <button type="submit" class=" colorbtn cancelbtn colorbtn" ng-disable="!contactForm.$valid" ng-disabled="!contactForm.$valid" ng-click="updateContact(contact)">Update Contact</button> 
     <button type="button" class="cancelbtn" ng-click="deleteContact(contact)">Delete Contact</button> 
    </div> 



    </body> 

    </html>

Если вы хотите отобразить сообщение следующий пустой Imput

  <div> 
       <input type="text" placeholder="First name" name="firstname" ng-model="con.first_name" required> 
       <span ng-show="contactForm.firstname.$dirty && contactForm.firstname.$error.required" class="help-block">first name required</span> 
      </div> 

      <div> 
       <label class="lbl"><b>Last name</b></label> 
      </div> 
      <div> 
       <input type="text" placeholder="Last name" name="lastname" ng-model="con.last_name" required> 
       <span ng-show="contactForm.lastname.$dirty && contactForm.lastname.$error.required" class="help-block">last name required</span> 
      </div>

источник

2017-02-02 20:42:14 AlainIb

Это хороший рабочий пример, и я хочу поблагодарить вас за помощь, но есть способ, как я уже упоминал, иметь всплывающее окно, которое указывает на поданная, которая пуста? –

вы хотите открыть всплывающее окно, когда вход пуст? – AlainIb

Я отредактировал plunkr. попробуйте удалить имя или фамилию, появится сообщение – AlainIb

Почему проверка HTML5 поля не работает в повторе ng?

ответ

Смежные вопросы