如何强制用户向 Angular 输入提供值答案

【问题标题】：How to force user to provide values to Angular Inputs如何强制用户向 Angular 输入提供值
【发布时间】：2014-03-23 12:23:57
【问题描述】：

使用 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 代码。我尝试过使用“必需”选项，这不会阻止未定义的值被传回。

【问题讨论】：

标签： forms node.js angularjs required-field

【解决方案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 了解更多信息。

【讨论】：