AngularJS Essential. Урок 3. Работа c DOM и валидация форм. Домашнее задание.

  • 185 Просмотры
  • Последний пост 19 января 2017
Maxim Shulga разместил пост 18 декабря 2016

Продолжаю выкладывать сделанный мной вариант решения домашних заданий по AngularJS. 

Дополнительное задание 1

 

Код
<!DOCTYPE html>
<html ng-app="module">
<head>
    <title>Дополнительное задание 1</title>
    <meta charset="utf-8" />
    <script src="../Libraries/angular.js"></script>
    <link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
    <link href="../Libraries/bootstrap.css" rel="stylesheet" />
    <style>
        .face1{
            color:red;
            font-weight:bold;
        }
        .face2{
            color:green;
            font-style:italic;
        }
        .face3{
            color:yellow;
        }
        p {
            text-align:justify;
        }
    </style>
    <script>
        angular.module("module", [])
        .controller("moduleCtrl", function ($scope) {
        });

    </script>
</head>
<body ng-controller="moduleCtrl">
    <div class="container">
        <p ng-class="face">
            font-style определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.
        </p>
        <div class="btn-group" role="group" aria-label="myGrp">
            <button type="button" class="btn btn-default" ng-click="face='face1'">Класс 1</button>
            <button type="button" class="btn btn-default" ng-click="face='face2'">Класс 2</button>
            <button type="button" class="btn btn-default" ng-click="face='face3'">Класс 3</button>
        </div>
    </div>
</body>
</html>

 

  • Пост понравился
  • ITVDN Admin
Отсортировать по: Стандартный | Последний | Голоса
Maxim Shulga разместил пост 18 декабря 2016

Чтобы кода было поменьше, Twitter Bootstrap стараюсь не применять, хотя и как результат выглядит это по древнему.

Задание 1

 

Код
<!DOCTYPE html>
<html ng-app="module">
<head>
    <title>Задача 1</title>

    <script src="../Libraries/angular.js"></script>

    <script>
        angular.module("module", [])
        .controller("moduleCtrl", function ($scope) {
            $scope.showAlert = function (err) {
                if (angular.isDefined(err))
                {
                    if (angular.isDefined(err.required)) return "Can't be blank"
                    else if (angular.isDefined(err.email)) return "Invalid email"
                    else return "Unregistered error"
                }
            }
        });

    </script>

    <style>
        label{
            float:left;
            width:130px;
        }
        input{
           margin: 3px 7px;
        }
        .alert-msg{
            color:red;
        }
    </style>
</head>

<body ng-controller="moduleCtrl">
    <form name="registration" novalidate>
        <label for="firstName">First name </label>
        <input type="text" id="firstName" name="fName" placeholder="First name" required ng-model="newUser.fName"/>
        <span class="alert-msg" ng-show="registration.fName.$invalid && registration.fName.$dirty">{{showAlert(registration.fName.$error)}}</span><br />


        <label for="lastName">Last name </label>
        <input type="text" id="lastName" name="lName" placeholder="Last name" required ng-model="newUser.lName" />
        <span class="alert-msg" ng-show="registration.lName.$invalid && registration.lName.$dirty">{{showAlert(registration.lName.$error)}}</span><br />


        <label for="middleName">Middle name </label>
        <input type="text" id="middleName" name="mName" placeholder="Middle name"><br />

        <label for="email">E-mail </label>
        <input type="email" id="email" name="eMail" placeholder="E-mail" required ng-model="newUser.eMail">
        <span class="alert-msg" ng-show="registration.eMail.$invalid && registration.eMail.$dirty">{{showAlert(registration.eMail.$error)}}</span><br />

        <label for="telephone">Telephone </label>
        <input type="tel" id="telephone" name="telephone" placeholder="Telephone"><br />

        <label for="password">Password </label>
        <input type="password" id="password" name="password" placeholder="Password" required ng-model="newUser.password">
        <span class="alert-msg" ng-show="registration.password.$invalid && registration.password.$dirty">{{showAlert(registration.password.$error)}}</span><br />

        <label for="confPassword">Confirm password </label>
        <input type="password" id="confPassword" name="passwordConfirm" placeholder="Confirm password" required ng-model="newUser.passwordConfirm">
        <span class="alert-msg" ng-show="newUser.passwordConfirm != newUser.password && registration.passwordConfirm.$dirty">Passwords not match</span><br />

        <input type="submit" ng-disabled="registration.$invalid">

    </form>

</body>
</html>

 

 

 

 

 

 

 

  • Пост понравился
  • ITVDN Admin
  • Петр Галушко
Петр Галушко разместил пост 19 декабря 2016

Огромное спасибо бро, уже весь интернет перерыл в поисках как эту домашку сделать. А оказалось, что прямо под носом было, скинешь еще решение к восьмому уроку? Там по ajax задача, у меня что-то вообще не выходит(

Никита Остапенко разместил пост 18 января 2017

 Немного подправил твое первое дополнительное задание, так, мне кажется, мы не зависимы от к-ва классов (или любых других входящих элементов) и можем не хардкодить.

<script>
        angular.module("module", [])
        .controller("moduleCtrl", function ($scope) {
            $scope.items = [
                {value: "face1"},
                {value: "face2"},
                {value: "face3"}
            ];

            $scope.check;            

        });
</script>
<body ng-controller="moduleCtrl">
    <div class="container">
        <p ng-class="check">
            font-style определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.
        </p>
        <div class="btn-group" role="group" aria-label="myGrp">
            <div ng-repeat="item in items">
                <input type="button" class="btn btn-default" value="{{item.value}}" ng-click="$parent.check= item.value"></input>
            </div>
        </div>
    </div>
</body>

  • Пост понравился
  • Maxim Shulga
Никита Остапенко разместил пост 19 января 2017

Мой вариант задания 1

 

Код
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="userForm">
<head>
    <title>User form</title>
    <script src="../js/angular.min.js"></script>
    <link href="../css/bootstrap.css" rel="stylesheet" />
    <link href="../css/bootstrap-theme.css" rel="stylesheet" />
    <style>
        form{
            width: 40%;
        }
        form .ng-invalid-required.ng-dirty, form .form-group .form-control.error_check{
            background-color: lightpink;
        }
        form .ng-invalid-email.ng-dirty,
        form .ng-invalid-pattern{
            background-color: lightgoldenrodyellow;
        }
        form .ng-valid.ng-dirty,
        form .form-group .form-control.good_check{
            background-color: lightgreen;
        }
        span.summary.ng-invalid {
            color: red;
            font-weight: bold;
        }
        span.summary.ng-valid {
            color: green;
        }
        .error {
            color: red;
            font-weight: bold;
        }
        form .form-group .form-control.good_check.ng-pristine{
            background: #fff;
        }
    </style>
    <script>

    // module
    angular.module("userForm", [])
    .controller("userFormCtrl", function($scope){
        $scope.phonePattern = new RegExp("[\\d\\+\\(]*[\\-\\s]?\\(?\\d{3}\\)?[\\-\\s]?[\\d\-\\s]{7,10}");    
        $scope.addNewUser = function(userDetails, isvalid){
            if(isvalid && userDetails.password == userDetails.replyPass){
                $scope.message = [
                    {
                        Name: userDetails.name,

                        Email: userDetails.email,

                        Phone: userDetails.phone,

                        Pass: userDetails.password,

                        Status: "Good"
                    }
                ];
            }
            else{
                $scope.message = [{
                    Status: "Error"
                }];
                $scope.showError = true;
            }
        }

        // Для многих элементов форм ошибки могут быть одинаковыми, для того чтобы избавиться от дублирования кода
        // можно использовать методы подобные getError

        $scope.getError = function (error) {
            if (angular.isDefined(error)) {
               if (error.required){
                    return "Поле не должно быть пустым";
                }
                else if (error.email){
                    return "Введите правильный email";
                }
                else if (error.pattern){
                    return "Введите правильный номер";
                }
                else if (error.minlength){
                    return "Мало символов";
                }
            }
        }
    });
    </script>

</head>

<body ng-controller="userFormCtrl">

    <h1>Регистрация нового пользователя:</h1>

    <form novalidate name="user_form" ng-submit="addNewUser(newUser, user_form.$valid)">

        <div class="well">

            <div class="form-group">

                <label for="userName">Name:</label>

                <input type="text" id="userName" name="userName" class="form-control" ng-model="newUser.name" required />

                <div class="error" ng-show="showError">

                    {{getError(user_form.userName.$error)}}

                </div>

            </div>

            <div class="form-group">

                <label for="userEmail">Email:</label>

                <input type="email" id="userEmail" name="userEmail" class="form-control" ng-model="newUser.email" required />

                <div class="error" ng-show="showError">

                    {{getError(user_form.userEmail.$error)}}

                </div>

            </div>

            <div class="form-group">

                <label for="userPhone">Phone:</label>

                <input type="text" id="userPhone" name="userPhone" class="form-control" ng-model="newUser.phone" ng-pattern="phonePattern" required />

                <div class="error" ng-show="showError">

                    {{getError(user_form.userPhone.$error)}}

                </div>

            </div>

            <div class="form-group">

                <label for="userPassword">Password:</label>

                <input id="userPassword" name="userPassword" ng-minlength="6" class="form-control" type="password" ng-model="newUser.password" required />

                <div class="error" ng-show="showError">

                    {{getError(user_form.userPassword.$error)}}

                </div>

            </div>

            <div class="form-group">

                <label for="userReplyPass">ReplyPass:</label>

                <input id="userReplyPass" name="userReplyPass" class="form-control" ng-minlength="6" type="password" ng-model="newUser.replyPass" ng-class="newUser.password == newUser.replyPass ? 'good_check' : 'error_check'" required />

                <div class="error" ng-show="showError">

                    {{getError(user_form.userReplyPass.$error)}}

                </div>

                <div class="error" ng-show="newUser.password != newUser.replyPass && user_form.userReplyPass.$dirty">

                    Пароли не совпадают

                </div>

            </div>

            <div class="checkbox">

                <label for="agreed">

                    <input type="checkbox" id="agreed" name="agreed" ng-model="newUser.agreed" required />

                    Я принимаю условия

                    <div class="error" ng-show="user_form.agreed.$invalid">

                        Примите пожалуйста условия

                    </div>

                </label>

            </div>

        </div>

        <button type="submit" class="btn btn-primary">

            Ok

        </button>




        <div class="well">

            Message: <br/>

            <span ng-repeat="item in message">

                Status: {{item.Status}}, <br/>

                Name: {{item.Name}}, <br/>

                Email: {{item.Email}}, <br/>

                Phone: {{item.Phone}}. <br/>

                    

            </span>

            <div>

                Valid:

                <span class="summary" ng-class="user_form.$valid ? 'ng-valid' : 'ng-invalid'">

                    {{user_form.$valid}}

                </span>

            </div>

        </div>

    </form>




</body>

</html>

 

 

  • Пост понравился
  • Maxim Shulga
Close