martinmicunda/employee-scheduling-ui

<form class="form-horizontal form-validation" name="partnerForm" role="form" novalidate>
    <div class="modal-header">
        <button type="button" class="close" ng-click="vm.cancel()">×</button>
        <h4 class="modal-title">
            <span ng-if="!vm.partner.id">Add</span><span ng-if="vm.partner.id">Edit</span> Partner
        </h4>
    </div>
    <div class="modal-body form-wizard">
        <alert-danger has-error="vm.hasError" error-message="vm.errorMessage"></alert-danger>
        <div class="form-group required">
            <label class="control-label col-sm-4">Name</label>
            <div class="col-sm-5">
                <input name="name" type="text" ng-model="vm.partner.name" class="form-control" ng-maxlength="20" required>
                <div ng-if="partnerForm.$submitted" ng-messages="partnerForm.name.$error">
                    <div ng-message="required" class="error">This field is required.</div>
                    <div ng-message="maxlength" class="error">This field text is too long (max 20 characters).</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4">Contact Person</label>
            <div class="col-sm-5">
                <input name="contactPerson" type="text" ng-model="vm.partner.contactPerson" class="form-control" ng-maxlength="60">
                <div ng-if="partnerForm.$submitted" ng-messages="partnerForm.contactPerson.$error">
                    <div ng-message="maxlength" class="error">This field text is too long (max 60 characters).</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4">Email</label>
            <div class="col-sm-5">
                <input name="email" type="email" ng-model="vm.partner.email" class="form-control" ng-maxlength="60">
                <div ng-if="partnerForm.$submitted" ng-messages="partnerForm.email.$error">
                    <div ng-message="email" class="error">Invalid email.</div>
                    <div ng-message="maxlength" class="error">This field text is too long (max 60 characters).</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4">Phone Number</label>
            <div class="col-sm-5">
                <input name="phoneNumber" type="text" ng-model="vm.partner.phoneNumber" class="form-control" ng-maxlength="20">
                <div ng-if="partnerForm.$submitted" ng-messages="partnerForm.phoneNumber.$error">
                    <div ng-message="maxlength" class="error">This field text is too long (max 20 characters).</div>
                </div>
            </div>
        </div>
        <div class="form-group required">
            <label class="control-label col-sm-4">Color</label>
            <div class="col-sm-5 color-picker-wrapper">
                <input colorpicker name="color" type="text" ng-model="vm.partner.color" class="form-control" mm-color-hex-validator required>
                <span class="color-picker-swatch color-picker-swatch-left">
                    <span class="color-picker-swatch-color" ng-style="{'background-color': vm.partner.color}"></span>
                </span>
                <div ng-if="partnerForm.$submitted" ng-messages="partnerForm.color.$error">
                    <div ng-message="required" class="error">This field is required.</div>
                    <div ng-message="hexcode" class="error">Invalid HEX color code.</div>
                </div>
            </div>
        </div>
        <div class="form-group" ng-show="vm.partner.id">
            <label class="control-label col-sm-4">Status</label>
            <div class="col-sm-5">
                <select name="status" ng-model="vm.partner.status" ng-options="statusType as statusType for statusType in vm.statusTypes" class="form-control"></select>
            </div>
        </div>
        <div class="form-group mb0">
            <label class="control-label col-sm-4">Note</label>
            <div class="col-sm-5">
                <textarea rows="5" name="note" ng-model="vm.partner.note" class="form-control" ng-maxlength="255"></textarea>
                <div ng-if="partnerForm.$submitted" ng-messages="partnerForm.note.$error">
                    <div ng-message="maxlength" class="error">This field text is too long (max 255 characters).</div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" ng-click="vm.cancel()" class="btn btn-sm btn-white">Close</button>
        <jp-ng-bs-animated-button class="btn btn-sm btn-success" ng-click="vm.save(partnerForm)" is-submitting="vm.isSubmitting" result="vm.result" options="vm.saveButtonOptions"></jp-ng-bs-animated-button>
    </div>
</form>