Newsletter Formular

by andreas_karz

HTML

<div ng-controller="mainController">
    <form name="myForm">
        <input type="hidden" name="select_newsletter" ng-model="select_newsletter" required />
        <table cellspacing="3">
            <tr>
                <td>Name*</td>
                <td>&nbsp;</td>
                <td>
                    <input type="text" 
                           name="lastname"
                           ng-model="lastname"
                           ng-class="{fail:!myForm.lastname.$valid}"
                           required
                    />
                </td>
            </tr>
            <tr>
                <td>E-Mail*</td>
                <td>&nbsp;</td>
                <td>
                    <!-- https://docs.angularjs.org/api/ng/input/input%5Bemail%5D -->
                    <input type="email" 
                           name="mail"
                           ng-model="mail" 
                           ng-class="{fail:!myForm.mail.$valid}"
                           required
                    />
                </td>
            </tr>
            <tr>
                <td colspan="3" class="checkgroup" ng-class="{fail:!myForm.select_newsletter.$valid}">
                    <span class="newsletter" ng-repeat="nl in Newsletter">
                        <!-- https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D -->
                        <input  type="checkbox" 
                                ng-model="nl.value" 
                                ng-true-value="1" 
                                ng-false-value="0" 
                                ng-change="validate()"
                        /> &nbsp; 
                        {{nl.label}}
                    </span>
                </td>
            </tr>
        </table>
        <!-- Submit ist disabled bis $valid = true -->
        <input type="submit" ng-disabled="!myForm.$valid" onclick="return false;" />
    </form>
    <br />&nbsp;<br />
    Ist Formular valid? : {{myForm.$valid}}<br />
  ...

CSS

body{
    margin:10px;
    font-family: calibri,arial;
    font-size: 10pt;
}

.newsletter{
    display: block;
    vertical-align: bottom;
    margin:0;
}

td.checkgroup{
    border:2px solid #FFFFFF;
}

.fail{
    border:2px solid #D07184 !important;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('mainController', function($scope) {

    $scope.Newsletter = [
        {
            label : 'Volkswirtschaftlicher Ausblick',
            value : '1'
        }, 
        {
            label : 'Finanzmarktausblick',
            value : '0'
        }
    ];

    $scope.validate = function (SysInfo) {
        var totalNewsletter = 0;
        // Alle Values durchzählen
        for (var x in $scope.Newsletter) {
            totalNewsletter += parseInt($scope.Newsletter[x].value);
        }
        // Total = 0, dann erster Newsletter wieder aktrivieren
        if( totalNewsletter == 0 ){
            $scope.select_newsletter = '';
            // $scope.Newsletter[0].value = '1';
        } else {
            $scope.select_newsletter = totalNewsletter;
        }
    };
    $scope.validate();
    
});