I have a form within which i have used x-editable plugin for editing a text-field. But i am getting the following script error. Can anyone please tell me some solution for this
Form with editable elements should have `editable-form` attribute. <span editable-text="user.name" e-form="textBtnForm" class="ng-scope ng-binding editable">
Working Demo
html
<div ng-app='myApp' ng-controller="ArrayController">
<form action="#" >
<span editable-text="user.name" e-form="textBtnForm">
{{ user.name || 'empty' }}
</span>
<button class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">edit
</button>
</form>
</div>
script
var app = angular.module('myApp', ["xeditable"]);
app.controller('ArrayController', function ($scope) {
$scope.test = "manu";
$scope.user = {
name: 'awesome user'
};
});
There are a couple things to do:
add the editable-form attribute to the form as the error suggest.
remove the e-form="textBtnForm", it's not required for your requirement.
instead, set the textBtnForm as a name of the form.
add type="button" to the edit button, otherwise it doesn't work (don't know why ..).
I've also add save and cancel button when editing for the sake of completeness.
The result would look like this:
<form editable-form name="textBtnForm" action="#">
<span editable-text="user.name">
{{ user.name || 'empty' }}
</span>
<button type="button" class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
edit
</button>
<span ng-show="textBtnForm.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="textBtnForm.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">
Cancel
</button>
</span>
</form>
JSFiddle: http://jsfiddle.net/5TZX5/1/
Hope this helps.
If there is just a single element you want to edit, you can remove the form, which will make it work.
Or you must add ng-click="$form.$show()" to the span element as described here.
the previous approach is partial correct and can be applied only if use a single input in that form. Also if you try to add more elements, then will not work correct.
So the right solution that i have is to use ng-form with editable-form directive as block for each form element (input) that you want apply the xedit plugin, and of course remove editable-form from main form.
the sample based by your code is below:
<div ng-app='myApp' ng-controller="ArrayController">
<form action="#" >
<div ng-form editable-form name="textBtnForm">
<span editable-text="user.name" ng-click="textBtnForm.$show()">{{user.name||'empty'}}</span>
<span ng-show="textBtnForm.$visible">
<button type="button" class="btn btn-primary" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$submit()"> Save</button>
<button type="button" class="btn btn-default" ng-disabled="textBtnForm.$waiting" ng-click="textBtnForm.$cancel()">cancel</button>
</span>
</div>
<hr>second form element<hr>
<div ng-form editable-form name="textBtnForm2">
<span editable-text="user.phone" ng-click="textBtnForm2.$show()">{{ user.phone || 'empty' }}</span>
<span ng-show="textBtnForm2.$visible">
<button type="button" ng-disabled="textBtnForm2.$waiting" ng-click="textBtnForm2.$submit()">Save</button>
<button type="button" class="btn btn-default" ng-disabled="textBtnForm2.$waiting" ng-click="textBtnForm2.$cancel()"> Cancel</button>
</span>
</div>
</form>
</div>
Related
I have this form where an error message shows under every field if I leave it empty or invalid.
<form #projectForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group col-md-6" [class.has-error]="codeControl.invalid && codeControl.touched">
<label class="control-label">code</label>
<input type="text" class="form-control" required [(ngModel)]="projet.code" id="code" name="code" #codeControl="ngModel">
<span class="help-block" *ngIf="codeControl.invalid && codeControl.touched">code is required </span>
</div>
<div class="form-group col-md-6" [class.has-error]="libelleControl.invalid && libelleControl.touched">
<label class="control-label">libelle</label>
<input type="text" class="form-control" required [(ngModel)]="projet.libelle" id="libelle" name="libelle" #libelleControl="ngModel">
<span class="help-block" *ngIf="libelleControl.invalid && libelleControl.touched"> libelle is required </span>
</div>
<button type="submit" class="btn btn-primary" >submit </button>
</form>
But when it comes to the submit button , I don't want the submit button to be disabled until the form is valid, instead I want the submit button border to become red and a red error message shows under the submit button when clicked and the form is invalid. How can I achieve that ?
try this:
on your component
success: any;
constructor ()
{
this.success = true;
}
onSubmit(){
if(this.yourform.invalid){
this.success= false;
return;
}
}
on your html
<div *ngIf="success;then content else other_content"></div>
<ng-template #content>
<button type="submit" class="btn btn-primary" >submit </button>
</ng-template>
<ng-template #other_content>
<button type="submit" class="btn btn-primary" style="border: 2px solid red">submit
</button>
<!-- your error message goes here -->
</ng-template>
i copied the *ngIf here at How to use *ngIf else?
I would go with simple getter to manage state of the 'submit btn'
get isFormValid():boolean {
this.ngForm && this.ngForm.valid;
}
then
<button type="submit" class="btn btn-primary" [class.cssClassToManageBtnState]="isFormValid" >submit </button>
We have to override the default behaviour of submit button. So, remove the button type as submit and add click event to it
<button type="button" (click)="onSubmit()" class="btn btn-primary" >submit </button>
Remove the submit event in form tag
<form #projectForm="ngForm">
Add the conditional class to the button
<button type="submit" (click)="onSubmit()" class="btn btn-primary" [ngClass]="projectForm.valid ? '' : 'invalid-form-btn'" >submit </button>
<span *ngIf="!projectForm.valid">The form is not valid </span>
.invalid-form-btn {
border: 1px solid red;
}
I'm trying to enable a button only when my input is filled with at least 18 characters. Here is the HTML code:
<form id="frm.frmEntidade" name="frm.frmEntidade">
<div>
<input type="text" ng-model="entidade.cnpj" id="cnpjEntidade" name="cnpjEntidade" required />
<span class="input-group-btn">
<button title="Buscar Entidade" class="btn btn-primary"
type="button" ng-click="buscarEntidade(entidade.cnpj)" ng-
disabled="frm.frmEntidade.cnpjEntidade.lenght !== 18">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
but the button stay awas disabled, anyone could help?
You have a typo error on the word length. Change:
<button [...]
ng-disabled="frm.frmEntidade.cnpjEntidade.lenght !== 18">
To:
<button [...]
ng-disabled="frm.frmEntidade.cnpjEntidade.length !== 18">
As a side note, this condition check if it is different from 18, not if "input is filled with at least 18 characters".
try ng-disabled="entidade.cnpj.length!=18"
It's better use ng-minlength for form validation. by checking $valid you can enable or disable button
<form id="frm.frmEntidade" name="frm.frmEntidade">
<input type="text" ng-model="entidade.cnpj" id="cnpjEntidade" name="cnpjEntidade" required ng-minlength="18" />
<span class="input-group-btn">
<button title="Buscar Entidade" class="btn btn-primary"
type="button" ng-click="buscarEntidade(entidade.cnpj)"
ng-disabled="!frm.frmEntidade.$valid">
<span class="glyphicon glyphicon-search"></span>
Button
</button>
</span>
</form>
i'm working on ACTIVI in AngularJS.
I need to submit forms, so i created it with a submit button. The problem is that each submit button is a bit different (one is for text type form, another for enum type forms) and with new form the previously button is repeated twice.
As you can see this one is ok:
.
But the next form repeat the previously submit button:
This is the code in html
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction">
<form ng-submit="submitForm()">
<div ng-repeat="x in names">
{{ x.name }}*
<div ng-if="x.id=='name'">
<input type="text" name="nome" ng-model="formData.properties[0].value" placeholder="{{x.name}}"> {{ value }} </input>
</div>
<div ng-if="x.id=='email'">
<input type="email" name="email" ng-model="formData.properties[1].value" placeholder="{{x.name}}"> {{ email }} </input>
</div>
<div ng-if="x.id=='income'">
<input type="number" name="numero" ng-model="formData.properties[2].value" placeholder="{{x.name}}"> {{ income }} </input>
</div>
</div>
</div>
</form>
<div ng-controller="completeTaskAction">
<form ng-submit="submitForm()">
<br>
<button ng-show="x.type==enum" type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span>Submit!
</button>
</div>
</form>
</div>
</div>
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction2">
<div ng-repeat="x in names">
<div ng-if="x.type=='enum'">
<!--/////////////////////////////////-->
<form ng-submit="submitForm2()">
<select ng-model="formData2.properties[0].value" ng-options="y.id as y.name for y in x.enumValues "></select>
<br>
<button ng-hide="x.type==enum" type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</div>
</div>
</form>
</div>
</div>
I tried (as you can see) with ng-show / hide / ng-if but doesnt work...
The first form is working fine because the button is outside ng-repeat. In the second case the submit button is inside ng-repeat.
Please consider the following Plunk.
I'm using this controller:
app.controller('myController', [
'$scope',
function($scope){
$scope.isDisabled = true;
$scope.ClickMe = function(text) {
alert(text);
};
}]);
And this HTML:
<body ng-app="ngApp">
<div ng-controller="myController">
<p>
Is disabled:
<input type="checkbox" ng-model="isDisabled"/>
</p>
<p>
<button class="btn btn-primary" ng-disabled="isDisabled" ng-click="ClickMe('Save')">Save</button>
<button class="btn btn-danger" ng-disabled="isDisabled" ng-click="ClickMe('Cancel')">Cancel</button>
</p>
<p>
<button class="btn-xs btn-primary" ng-disabled="isDisabled" ng-click="ClickMe('Save')">Save</button>
<button class="btn-xs btn-danger" ng-disabled="isDisabled" ng-click="ClickMe('Cancel')">Cancel</button>
</p>
</div>
</body>
Question
As you can notice, there's no visible difference between disabled/enabled state for the buttons styled btn-xs. The normal btn buttons are fine.
The actual state itself does work however, as you can't click on the buttons when disabled.
Am I doing something wrong or is that just how btn-xs btn-sm works?
Is there an easy way to toggle disabled state in a way that is visible to the user?
Maybe a custom class based on btn-xs?
Thanks!
You forgot to give the small buttons the 'btn' class.
In my controller i have methods
$scope.openJukeboxesModalToGroup -- open modal popup
$scope.searchJukeboxes --- to search on the page
$scope.keyPressed -- capture the key pressing
In the partial with a form
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed method is
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
I am trying to start the search whenever ever somebody types something in the text bar and clicks enter. But i don't somehow the openJukeboxesModalToGroup() method is called too. I have tried to stop this by calling stop event proprpagation, changing name of openJukeboxesModalToGroup() method. But nothing is working. Any help on this.
deadForm() method is impleament and i am not getting any error in chrome console.
Change your button for openJukeBoxesModalToGroup() to this:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
The issue is you are not providing a type so it is classing the button as a submit in which case openJukeboxesModalToGroup() is being fired from your enter submit event.
When you are hitting enter inside a form it will trigger a submission, I recommend adding your method to the form itself via the ng-submit directive and making your button the submission...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>