Angular Form Validation with generic textbox directive

controllerASctrl.ts

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);

directive.ts

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);

template.html

<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>