Skip to content

Instantly share code, notes, and snippets.

@dmorosinotto
Created April 20, 2016 15:22
Show Gist options
  • Save dmorosinotto/f9f3ec32cdddd3960e80c73d743637bd to your computer and use it in GitHub Desktop.
Save dmorosinotto/f9f3ec32cdddd3960e80c73d743637bd to your computer and use it in GitHub Desktop.
Angular Form Validation with generic textbox directive
export class FormController {
static $inject = ["XeApiSvc", "MsgboxSvc"];
constructor(private api: Services.XeApiSvc, private msg: Services.MsgboxSvc) {
this.inInsert = false;
}
public data: Models.IRegistration;
public toggleInsert() {
//mostra la form di inserimento dati
this.inInsert = !this.inInsert;
//initializza il model data con dei valori default (EventId + Privacy=true)
if (this.inInsert) this.data = {
Name: "", Surname: "", Email: "", City: "",
Privacy: true
};
}
public Cancel() {
//nasconde la form di inserimento dati
this.inInsert = false;
}
public Save() {
//chiamata API per salvare i dati sul DB
this.api.newSubscription(this.data)
.then(r => r.data,
(e: { status?: number }) => {
if (e.status == 400) { //BAD REQUEST
this.msg.showError("Formato dati inviati non valido, controllare che l'Email sia valida !", "ERROR 400");
} else if (e.status == 409) { //CONFLICT
this.msg.showError("Iscrizione non accettata, esiste gia' una registrazione con questa Email !", "ERROR 409");
} else { //SERVER ERRORS
this.msg.showError("ERROR " + e.status, "Errore nella iscrizione");
}
})
.then(s => {
if (s) {
//nasconde la form inserimento ed emette evento onRegistration per notificare padre dell'avvenuta registrazione
this.inInsert = false;
this.msg.showSuccess({ $event: s });
}
});
}
}
angular.module("myApp").controller("FormController", FormController);
export function xeTextboxDir(): ng.IDirective {
return {
restrict: 'E',
scope: {
label: '@',
model: '=',
isReq: '@'
,isValid: '='
,errMessage: '@'
},
template: function(tElement,tAttrs) {
var name = tAttrs.name || tAttrs.label;
var type = tAttrs.type || "text";
//STO TORNANDO UNA FUNZIONE CHE RITORNA DINAMICAMENTE L'HTML CON IL name="xxx" DELL'INPUT ATTUALIZZATO!
//PERCHE' HO IL PROBLEMA CHE <input name="{{label}}" NON VIENE VALUTATA IN MODO CORRETTO
//O MEGLIO FORSE VIENE INTERPOLATA TROPPO TARDI E QUESTO CAUSA IL PROBLEMA CHE NG-MODEL
//NON HA IL name="xxx" ASSOCIATO E QUINDI POI NON RIESCO A GESTIRE I CAMPI DI VALIDAZIONE
//DALL'ESTERNO $scopeController.frmName.inputName.$valid , $pristine , $error , etc... COSI INVECE FUNZIONA!
return `
<div class="umb-property" property="property">
<div class="control-group umb-control-group" ng-class="{'error': !isValid}">
<div class="umb-el-wrap">
<label class="control-label" for="${name}">
{{label}}
</label>
<div class="controls controls-row">
<input type="${type}" name="${name}" ng-model="model" ng-required="isReq=='true'" class="umb-editor umb-textstring textstring">
<span ng-if="!isValid" class="help-inline">{{errMessage}}</span>
</div>
</div>
</div>
</div>
` }
}
}
angular.module("myApp").direcrive("xeTextboxDir" , xeTextboxDir);
<div ng-controller="FormController as ctrl">
<button class="btn" ng-click="ctrl.toggleInsert()">Nuova Registrazione</button>
<div ng-if="ctrl.inInsert">
<form name="frm" ng-submit="ctrl.Save()">
<umb-panel>
<umb-header tabs="content.tabs">
<div class="umb-headline-editor-wrapper span12">
<h2>Nuova registrazione</h2>
</div>
</umb-header>
<umb-tab-view>
<umb-tab id="tab1" rel="svensson" class="active">
<div class="umb-pane">
<div class="umb-listview">
<xe-textbox-dir name="Name" label="Nome" model="ctrl.data.Name" is-req="true"
is-valid="frm.Name.$valid || frm.Name.$pristine" err-message="*nome obbligatorio"></xe-textbox-dir>
<xe-textbox-dir name="Surname" label="Cognome" model="ctrl.data.Surname" is-req="true"
is-valid="frm.Surname.$valid || frm.Surname.$pristine" err-message="*cognome obbligatorio"></xe-textbox-dir>
<xe-textbox-dir type="email" name="Email" label="Email" model="ctrl.data.Email" is-req="true"
is-valid="frm.Email.$valid || frm.Email.$pristine" err-message="*email obbligatoria"></xe-textbox-dir>
<xe-textbox-dir name="City" is-valid="true" label="Citta" model="ctrl.data.City" is-req="false"></xe-textbox-dir>
<pre ng-if="!frm.$valid">
Name val={{frm.Name.$valid}} - err={{frm.Name.$error}}
Surname val={{frm.Surname.$valid}} - err={{frm.Surname.$error}}
Email val={{frm.Email.$valid}} - err={{frm.Email.$error}}
$valid={{frm.$valid | json}}
$error={{frm.$error | json}}
form={{frm}}
</pre>
</div>
</div>
</umb-tab>
</umb-tab-view>
<div class="umb-panel-footer">
<div class="btn-toolbar umb-btn-toolbar pull-right">
<a class="btn btn-link" data-hotkey="esc" ng-click="ctrl.Cancel()">
<localize key="cancel" />
</a>
<button type="submit" data-hotkey="ctrl+s" class="btn btn-success" ng-disabled="!frm.$valid">
<localize key="buttons_save">Save</localize>
</button>
</div>
</div>
</umb-panel>
</form>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment