Как заставить пользователя предоставлять значения для угловых входов

Question

Использование Angular для разработки формы с 3 входами (на основе учебника Scotch.IO для Node+Express+Angular). Я бы хотел, чтобы пользователь в обязательном порядке выбирал значения для каждого ввода перед отправкой формы. Если нет, то я бы хотел отобразить сообщение об ошибке.

<form>
    <div class="form-group">
        Start Date: <input type="date" class="form-control input-lg text-center" ng-model="formData.fromDate" placeholder="yyyy-MM-dd">
    </div>
    <div class="form-group">
        End Date: <input type="date" class="form-control input-lg text-center" ng-model="formData.toDate" placeholder="yyyy-MM-dd">
    </div>
    <div class="form-group">
        Report Type: <select class="form-control input-lg text-center" ng-model="formData.reportType">
            <option value="csv">CSV</option>
            <option value="pdf">PDF</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary btn-lg" ng-click="findStat()">Add</button>
</form>

Другими словами, я не хотел бы передавать неопределенные значения обратно в мой код Node.js. Я попытался использовать "обязательные" параметры, которые не препятствуют возвращению неопределенных значений.

Answer 1

Дайте вашей форме имя:

<form name="myForm">

Также дайте вашим входам имя и добавьте к ним ограничения действительности (обязательно и т. Д.):

<input type="date" name="date" ...

Тогда в вашем findStat() функция, вы можете получить доступ к форме и проверить, если она действительна:

$scope.findStat = function() {
    if ($scope.myForm.$invalid) {
        $scope.displayError = true;
    }
    else {
        $scope.displayError = false;
        ...
    }
}

См. http://code.angularjs.org/1.2.15/docs/api/ng/directive/form и http://code.angularjs.org/1.2.15/docs/api/ng/type/form.FormController для дополнительной информации.