Why doesn't $dirty, $invalid, $valid work in AngularJS?

R

Ramyon2020-05-20 21:44:19

Angular

Ramyon, 2020-05-20 21:44:19

Hello! I'm trying to make a simple registration form as part of the training, you need to use AngularJS. There are three fields on the form. If the fields are not filled, then the "Submit" button is inactive. If everything is filled in and everything is OK, then an alert 'our form is amazing' should appear.
But from the form there is no reaction, except for the messages "Fill in this field." The button is always active, but the alert does not appear.
Tell me, what's the problem?
UPD. The problem is observed when running from Visual Studio. If you use all sorts of online tools, then everything is ok. But it needs to be done exactly as a project in VS. I tried downloading ready-made similar projects and running them from VS - everything was in order.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Сохранение пользователя</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body>
    <div ng-app="saveUserApp" ng-controller="saveUserController">
        <div class="container">
            <div class="col-sm-4 col-sm-offset-3">
                <h2>Сохранение пользователя</h2>
                <form name="form" ng-submit="save()">
                    <div class="form-group" ng-class="{ 'has-error': form.login.$dirty && form.login.$error.required }">
                        <label for="login">Логин</label>
                        <input type="text" name="login" id="login" ng-model="login" class="form-control" required/>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error': form.firstName.$dirty && form.firstName.$error.required }">
                        <label for="firstName">Имя</label>
                        <input type="text" name="firstName" id="firstName" ng-model="firstName" class="form-control" required/>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">
                        <label for="lastName">Фамилия</label>
                        <input type="text" name="lastName" id="lastName" ng-model="lastName" class="form-control" required/>
                    </div>
                    <div class="form-actions">
                        <button type="submit" ng-disabled="form.$invalid" class="btn btn-primary btn-lg btn-block">Отправить</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
    <script src="//code.angularjs.org/1.6.0/angular-route.min.js"></script>
    <script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"></script>
</body>
    </html>

var saveUserApp = angular.module('saveUserApp', []);
saveUserApp.controller('saveUserController', function ($scope) {
    $scope.save = function () {
        if ($scope.form.$valid) {
            alert('our form is amazing');
        }
    }
})

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Ramyon, 2020-05-26
@ramyon

Firstly, I did not add my script to the script tag, and secondly, this needs to be done after adding angular

<script src="//code.angularjs.org/1.7.9/angular.min.js"></script>
    <script src="//code.angularjs.org/1.7.9/angular-route.min.js"></script>
    <script src="//code.angularjs.org/1.7.9/angular-cookies.min.js"></script>
    <script src="js/controllers/saveUser.js"></script>