0.10.5 select validation

by vaiism

HTML

<script src="https://code.angularjs.org/0.10.5/angular-0.10.5.min.js" ng:autobind></script>
<script>
function AuditController() {
    this.queryObject = {
        numResults: 20
    };

    this.ruleSettings = {
        outputAction: '',
        datasets: {
            startingDataset: 0
        }        
    };
    
    this.datasetsArray = [
        {value:1, label:"Fred"},
        {value:2, label:"John"},
        {value:3, label:"Wilma"}    
    ];
    
}
</script>

<div ng:controller="AuditController">

    <form name="ruleSettingsForm">
        <div id="output">
            <b>Dataset Id: </b> {{ruleSettings.datasets.startingDataset}}
            <hr/>
            Output Action: <input ng:model="ruleSettings.outputAction"/><br/>
            Starting Dataset: 
            <select name="startingDataset" ng:model="ruleSettings.datasets.startingDataset"
                    class="formElement"
                    ng:required="{{ruleSettings.outputAction != '' && ruleSettings.outputAction != 'none'}}"  
            ng:options="ds.value as ds.label for ds in datasetsArray">
            </select>
        </div>
   
    <hr/>
        <tt>ruleSettingsForm.$valid = {{ruleSettingsForm.$valid}}</tt><br/>
        <tt>ruleSettingsForm.$error.REQUIRED = {{!!ruleSettingsForm.$error.REQUIRED}}</tt><br/>
    </form>
</div>

CSS

body {font-family:sans-serif;font-size:12pt;padding:10px; }
.error { color: red; }
input, select {
    margin: 4px;
}
input.ng-invalid, select.ng-invalid, textarea.ng-invalid, input.formElement.ng-invalid {
    border: solid 1pt red;
}
tt {font-size: 10pt;}
#output {background-color: #efefef;padding:5px;border:solid 1pt #ddd;}