Таска по angulerjs

225

18 мая 2018, 11:50

Задачка вроде не сложная, но я больше по реакту, а таску надо решить очень срочно. После 0 в конце строки обратно появляется 10 (в Title (10 символов), DisplayName (15 символов) и Category (6 символов)). а нужно чтобы уходило в отрицательные значения. то есть после 0 должна идти -1, -2, -3... и тд. [задачка тут][1]

  [1]: https://codepen.io/archivisions/pen/PeRdjB

var app = angular.module("ngrepeatApp", []); 
 
app.controller("ngrepeatCtrl", function ($scope) { 
 
    $scope.params = [ 
        { 
            Title: "Title", 
            Description: "Type Title Here", 
            Value: "", 
            MaxLength: 10 
        }, 
        { 
            Title: "DisplayName", 
            Description: "Type Title Here", 
            Value: "", 
            MaxLength: 15 
        }, 
        { 
            Title: "Category", 
            Description: "Type Category Here", 
            Value: "", 
            MaxLength: 6 
        } 
    ]; 
 
});

<html> 
<head> 
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script> 
    <style type="text/css"> 
        ol { 
            margin: 20px 0; 
            padding: 20px; 
        } 
 
        input.ng-dirty.ng-invalid { 
            border: 1px solid red 
        } 
    </style> 
</head> 
<body ng-app="ngrepeatApp" ng-controller="ngrepeatCtrl"> 
    <div class="container"> 
        <h1 style="margin-top:60px; margin-bottom:20px">Таска по Angular+js</h1> 
        <ol> 
            <li>Под каждым полем ввода выводится строка "Available <i>n</i> symbols", где <i>n</i> - параметр <i>MaxLength</i> у каждого из объектов в массиве $scope.params.</li> 
            <li> 
                Вывести под каждым полем ввода вместо <i>n</i> не параметр <i>MaxLength</i>, а разницу между количеством введенных символов и <i>MaxLength</i> и, 
                если разница отрицательная (т. е. введено больше, чем доступно), выделить эту строку красным цветом. 
            </li> 
            <li>Введенную строку обрезать до <i>MaxLength</i> нельзя.</li> 
            <li>Форма должна иметь состояние $invalid, если какое-то из полей не заполнено или превышен лимит введенных символов, как и сейчас.</li> 
        </ol> 
 
 
        <form novalidate name="paramForm"> 
            <div class="form-group" ng-repeat="p in params"> 
                <label>{{p.Title}}</label> 
                <input type="text" class="form-control" placeholder="{{p.Description}}" required ng-model="p.Value" maxlength="p.MaxLength.length*0" ng-maxlength="{{p.MaxLength}}"> 
                <small class="form-text text-muted" >Available <span>{{p.MaxLength - p.Value.length}}</span> symbols</small> 
            </div> 
            <button type="submit" class="btn btn-success" type="submit" ng-disabled="paramForm.$invalid">Submit</button> 
        </form> 
    </div> 
</body> 
</html>

Answer 1

Доработал.

Решил задачу по работе с ng-disabled в button (перевод кнопки в вид disabled при отрицательном значении в параметре MaxLength).

В массиве, params ищется элемент, в котором value.length больше MaxLenght, но find если что-то находит - возвращает этот элемент, поэтому впереди еще стоит !! дабы перевести в явное булево значение, то есть если что-то найдет, то будет true, если не найдет, то будет false и тогда будет выполнятся paramForm.$invalid для button, если и тут false то кнопка валидная.

var app = angular.module("ngrepeatApp", []); 
 
app.controller("ngrepeatCtrl", function ($scope) { 
 $scope.isInvalid = function() { 
    return !!$scope.params.find(i => (i.Value.length > i.MaxLength)); 
  } 
 
    $scope.params = [ 
 
        { 
            Title: "Title", 
            Description: "Type Title Here", 
            Value: "", 
            MaxLength: 10 
        }, 
        { 
            Title: "DisplayName", 
            Description: "Type Title Here", 
            Value: "", 
            MaxLength: 15 
        }, 
        { 
            Title: "Category", 
            Description: "Type Category Here", 
            Value: "", 
            MaxLength: 6 
        } 
 
    ]; 
 
});

<html> 
<head> 
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script> 
    <style type="text/css"> 
        ol { 
            margin: 20px 0; 
            padding: 20px; 
        } 
        input.ng-dirty.ng-invalid { 
            border: 1px solid red 
        } 
    </style> 
</head> 
<body ng-app="ngrepeatApp" ng-controller="ngrepeatCtrl"> 
    <div class="container"> 
        <h1 style="margin-top:60px; margin-bottom:20px">Таска по Angular+js</h1> 
        <ol> 
            <li>Под каждым полем ввода выводится строка "Available <i>n</i> symbols", где <i>n</i> - параметр <i>MaxLength</i> у каждого из объектов в массиве $scope.params.</li> 
            <li> 
                Вывести под каждым полем ввода вместо <i>n</i> не параметр <i>MaxLength</i>, а разницу между количеством введенных символов и <i>MaxLength</i> и, 
                если разница отрицательная (т. е. введено больше, чем доступно), выделить эту строку красным цветом. 
            </li> 
            <li>Введенную строку обрезать до <i>MaxLength</i> нельзя.</li> 
            <li>Форма должна иметь состояние $invalid, если какое-то из полей не заполнено или превышен лимит введенных символов, как и сейчас.</li> 
        </ol> 
 
        <form novalidate name="paramForm"> 
            <div class="form-group" ng-repeat="p in params"> 
                <label>{{p.Title}}</label> 
                                <input type="text" class="form-control" placeholder="{{p.Description}}" required ng-model="p.Value" ng-style="{'border-color' : p.Value.length <= p.MaxLength ? 'gray':'red'}"> 
                <small class="form-text  text-muted" >Available <span>{{p.MaxLength -  p.Value.length}}</span> symbols</small> 
            </div> 
            <button type="submit" class="btn btn-success" type="submit" ng-disabled=" isInvalid() || paramForm.$invalid" >Submit</button> 
        </form> 
    </div> 
    <script src="app.js"></script> 
</body> 
</html>