AngularJs Directive to simplify form inputs -

AngularJs Directive to simplify form inputs -

my company has theme requirements , has asked me research on angularjs. end, i'd show how angular can used implement our theme.

here plunk of have far.

here html of have works great.

<form name="frmlogin" ng-submit="submit()" novalidate> <div class="form-field" data-ng-class="{'error': frmlogin.txtlastname.$invalid && frmlogin.txtlastname.$dirty && !frmlogin.txtlastname.$focused}"> <label for="txtlastname" class="required">email</label> <input id="txtlastname" name="txtlastname" type="text" data-ng-model="user.lastname" required autofocus ng-focus /> <div class="inline-validation" data-ng-show="frmlogin.txtlastname.$invalid && frmlogin.txtlastname.$dirty && !frmlogin.txtlastname.$focused"> {{geterror(frmlogin.txtlastname.$error, { required: "lastname required" } )}} </div> </div> </form>

i'm working on directive simplify html developer.

here's idea.

<form name="frmusername" novalidate> <ff-text-input control-name="txtfirstname" control-label="first name" ng-model="user.useremail"></ff-text-input> </form>

being new this, i'm struggling directive.

i don't know how grab whole frmlogin.txtlastname.$invalid && frmlogin.txtlastname.$dirty && !frmlogin.txtlastname.$focused developer doesn't have to.

i'm able determine form name , command name using ctrl.$name + "." + scope.controlname i'm lost on how apply $invalid etc...

thanks, duane

since, want directive interact form states, need have form controller in directive. can with

app.directive('inputvalidate', function(){ homecoming { restrict: 'a', scope: true, require: '^form',

the require tell angular directive depends on form, angular moves dom, until finds form, , when finds form, passes controller directive , can receive controller this.

link: function(scope, element, attrs, formcontroller){

here formcontroller refers controller of form.

now, lastly query, suppose have input box type defined employeeid, custom rule plus juggling, able conclude input wrong. inform angular input wrong, can utilize $setvalidity method of formcontroller.

the syntax

formcontroller[controlname].$setvalidity(str, value);

where controlname name of control, str field validation has failed, , value either true or false depending upon validation state.

depending upon validation state , key, angular apply fallowing class element. example, if key in empid , input invalid, in class attribute of element, can see this.

class = "ng-invalid-empid"

and if valid , have told angular formcontroller using this.

formcontroller[controlname].$setvalidity('empid', true);

you have this.

class="ng-valid-empid"

angularjs angularjs-directive