Угловой JS валидационный ввод без формы, внутри таблицы

Question

Мой вопрос может показаться странным, но я построил угловой SPA, который позволяет пользователю вводить информацию непосредственно в таблицу с использованием входных данных. Я сделал это так, так как данные никогда не должны быть отправлены нигде и используются службой для вычисления некоторых значений, которые будут отображаться в конце. Моя проблема сейчас, хотя я бы хотел проверить данные, чтобы убедиться, что они не пусты.

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

 <table class="text-center"> 
       <tr> 
        <th class="header">Course Type</th> 
        <th>Amount of Times</th> 
        <th>Frequency (PA)</th> 
        <th>% Staff who need it</th> 
       </tr> 
       <tr> 
        <td class="header"><label for="induction">Induction:</label></td> 
        <td><input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /></td> 
        <td><input class="form-control" type="number" id="inductionFrequency" ng-model="staff.inductionFrequency" /></td> 
        <td><p>100</p></td>    
       </tr> 
       <tr> 
        <td class="header"><label for="newsLetter">News letter:</label></td> 
        <td><input class="form-control" type="number" id="newsLetterAmount" ng-model="staff.newsLetterAmount" /></td> 
        <td><input class="form-control" type="number" id="newsLetterFrequency" ng-model="staff.newsLetterFrequency" /></td> 
        <td><input class="form-control" type="number" id="newsLetterPercent" ng-model="staff.newsLetterPercent" /></td> 
       </tr> 
     </table> 

    <div class="row margin-top"> 
     <div class="col-sm-4 col-sm-offset-4"> 
      <button class="button-orange" style="font-size: 16px; font-weight: 700;" ng-click="clicked()">Next Step</button> 
     </div> 
    </div> 

информация хранится в объекте, который затем используется для запуска некоторых вычислений для пользователя, то, что было бы рекомендуемым способом добавить базовую проверку, используя угловую 1.2, чтобы не позволить пользователю продолжать, если значения пустые? Извините, это мое первое угловое приложение. В прошлом я выполнял проверку JavaScript, используя размытие и т. Д., Но, похоже, я могу использовать Angular, это было бы намного проще.

Answer 1

В AngularJS директива формы автоматически привязана к элементу найденной формы. Вам не нужно использовать элемент формы. Вы можете просто использовать ng-form.

<table ng-form="exampleForm"> 
    ... 
</table> 

Это создает FormController на элементе и добавляет «форму» в локальной области и будут доступны там (например, $scope.exampleForm).

Я написал пример plunker here и сделал пару вещей.

1. Я добавил директиву ng-form на стол.
2. Я добавил required к первого входного элемента
3. я добавить директиву ng-disabled к кнопке и связал его к $invalid свойству формы.

Вы увидите, как только первый вход имеет значение, кнопка станет активной.

На другом примечании я бы высоко предложил модернизировать с 1.2.x. Есть много обновлений для обеспечения безопасности, стабильности и производительности, которые вы, возможно, упускаете.

Answer 2

Если вы используете форму, то форма обращаться по умолчанию проверки на FORMNAME. $ IsValid, FromName. $ Грязный и т.д.

Если вы не хотите использовать тэг формы, то Вам нужно для этого вручную, используя ng-show, чтобы показать/скрыть сообщение об ошибке с двухсторонней привязкой.

как

<input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /> 

<span style="color:red" ng-show="staff.inductionAmount === undefined || staff.inductionAmount === ''"> idection name is required</span> 

---

другой путь такой же, как то, что вы делали в JavaScript с on-focus, здесь точно так же сделать с помощью ng-fucus и ng-show/ng-hide пути.