angularjs中的表单验证不起作用

时间:2017-08-28 09:46:21

标签: angularjs validation

我在angularjs中写了一个表格验证,但它不起作用。

当我发送包含空字段的表单时,表单中的“ng-valid”类和“ng-hide”不会从错误中删除。

<form name="form" ng-submit="createUser(user)" novalidate>
    <div class="form-group">
        <label for="name">Nazwa użytkownika:</label>
        <input type="text" name="name" id="name" class="form-control" ng.model="user.name" required="">
        <div ng-show="form.$submitted || form.name.$touched">
            <div ng-show="form.name.$error.required">Podaj nazwę użytkownika.</div>
        </div>
    </div>
    <div class="form-group">
        <label for="email">Adres e-mail:</label>
        <input type="email" name="email" id="email" class="form-control" ng.model="user.email">
        <div ng-show="form.$submitted || form.email.$touched">
            <span ng-show="form.email.$error.required">Podaj adres e-mail.</span>
            <span ng-show="form.email.$error.email">Adres e-mail jest nieprawidłowy.</span>
       </div>
    </div>
    <div class="form-group">
        <label for="role">Rola użytkownika:</label>
        <select name="role" id="role" class="form-control" ng-model="user.role">
            <option value="3">klient</option>
            <option value="2">pracownik</option>
            <option value="3">admin</option>
        </select>
        <div ng-show="form.$submitted || form.role.$touched">
            <span ng-show="form.role.$error.required">Wybierz rolę użytkownika.</span>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Dodaj użytkownika</button
</form>

1 个答案:

答案 0 :(得分:3)

您的某些ng-model中有拼写错误。它应该是ng-model而不是ng.model。您必须设置ng-required="true",或者只需将required放在所有必填字段

<input type="text" name="name" id="name" class="form-control" ng-model="user.name" ng-required="true">