I have the following html form
<form name="enviarAutorizacao" id="enviarAutorizacao" novalidate>
<label class="form-label-gray">autorization</label>
<input class="form-control col-sm-6" ng-model="current.autorizacao" id="autorizacao" ui-mask="" maxlength="20" required>
<div class="form-group col-sm-8">
<label class="form-label-gray"> Value </label>
<div class="form-group col-sm-2 form-label-gray">
<label>$</label>
</div>
<div class="form-group col-sm-9">
<input class="form-control" maxlength="16" ng-model="current.valor" required id="valor">
</div>
</div>
<div class="form-group col-sm-12">
<button class="btn btn-default" ng-disabled="enviarAutorizacao.$invalid || enviarAutorizacao.$pristine" id="submit-representante-estabelecimento" ng-click="validateAssociate()">click me</button>
</div>
</form>
I am trying to enable the submit button, only when the 2 inputs are filled, but it is enabling right when I type on the first input (autorizacao).
I tried few alternatives, like change "ng-disabled="enviarAutorizacao.$invalid" to "ng-disabled="!enviarAutorizacao.$valid", but didnt works.
What is wrong with this html ?
If you use enviarAutorizacao.autorizacao.$invalid you will know if the "autorizacao" input is Invalid.
[form id].[input name].[$valid or $invalid or $dirty...]
So your code should be like this:
I changed the input's name and submit's ng-disabled
<form name="enviarAutorizacao" id="enviarAutorizacao" novalidate>
<label class="form-label-gray">autorization</label>
<input class="form-control col-sm-6" ng-model="current.autorizacao" id="autorizacao" ui-mask="" maxlength="20" name="autorizacao" required>
<div class="form-group col-sm-8">
<label class="form-label-gray"> Value </label>
<div class="form-group col-sm-2 form-label-gray">
<label>$</label>
</div>
<div class="form-group col-sm-9">
<input class="form-control" maxlength="16" ng-model="current.valor" required id="valor" name="valor">
</div>
</div>
<div class="form-group col-sm-12">
<button class="btn btn-default" ng-disabled="enviarAutorizacao.autorizacao.$invalid || enviarAutorizacao.valor.$invalid" id="submit-representante-estabelecimento" ng-click="validateAssociate()">click me</button>
</div>
</form>
Try using the ids of the actual inputs individually as the arguments to ng-disabled.
Alternatively you could check the validity of current.autorizacao and current.valor and use those.
Related
When I am using ngFor directive in the form tag, the entire form will disappear. Can anyone guide me on how I can fix this issue?
<form #myforms="ngForm" *ngFor="let i of editaddress">
<div class="p-3 p-lg-5 border">
<div class="form-group row">
<div class="col-md-12">
<label for="c_fname" class="text-black">Save this address as<span class="text-danger">*</span></label>
<input type="text" class="form-control c_fname" value="{{i.title}}" name="title" [(ngModel)]="location.title" #title=ngModel>
</div>
<div class="col-md-6">
<label for="c_fname" class="text-black">First Name<span class="text-danger">*</span></label>
<input type="text" class="form-control c_fname" value="{{i.first_name}}" name="fname" [(ngModel)]="location.first_name" #fname=ngModel>
</div>
<div class="col-md-6">
<label for="c_lname" class="text-black">Last Name<span class="text-danger">*</span></label>
<input type="text" class="form-control c_lname" value="{{i.last_name}}" name="lname" [(ngModel)]="location.last_name" #lname=ngModel>
</div>
</div>
</div>
<div class="col-lg-12">
<input type="submit" class="btn btn-primary btn-lg btn-block" value="Save" (click)="saveAddress(location)">
</div>
</div>
</div>
Since you did not show any part of the underlying controller, the only thing I can do is inform you that the property editaddress would be an empty array. Therefore it would not render anything.
If it flashes and disappears, it means that through your life cycle the array may have content, but at some point the array is set to [] which updates the the markup accordingly.
This might be something simple that I am missing but I cant get though this. I am using bootstrap 3 in my application. In my form I have some controls like dropdowns, textbox, labels etc. See example as below:
<div class="modal-body">
<form role="form" name="form" class="form-body">
<div class="form-group">
//form label here
<div class="m-grid-col-sm-5">
//form element here
</div>
</div>
</form>
<div>
Above is just a example. The issue is when I run my app, I can see is the label is always above the control. What I want is the label on the left and the form control (dropdown,textbox etc) on the right.
You can see I created a sample jsfiddle at:
https://jsfiddle.net/aman1981/xprh2tno/8/
Please ignore the modal class as the issue is not I am having is not at the modal but other forms within my app as well.
I have tried adjusting and using different class but looks like its not adjusting well.
You need to refer the Horizontal Form section in the documentation here: http://bootstrapdocs.com/v3.0.3/docs/css/#forms
HTML:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Demo: https://jsfiddle.net/xprh2tno/12/
You Can try this Code here
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="name" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="sex" class="col-xs-2 control-label">Sex</label>
<div class="col-xs-10">
<select name="sex" class="auto-width setup-inline form-control input-medium" required>
<option value="">---Please select---</option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 text-right">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
I am trying to perform validations to my fileds in such a way that when i click on submit button it must show error to fields which are empty.Can anyone please help me .............
<div *ngFor="let detail of details" class="nopadding col-sm-12">
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin col-sm-12 formpaddingcss" name="template-contactform" novalidate="novalidate">
<div class="form-process"></div>
<div class="col_half">
<label for="template-contactform-name">First Name <small>*</small></label>
<div class="input-group divcenter">
<span class="input-group-addon noradius"><i class="icon-user iconcolorcss"></i></span>
<input type="email" data-toggle="tooltip" data-placement="top" title="Enter Firstname!" name="widget-subscribe-form-email" class="form-control required email formcontrolheight" [formControl]="form.controls['firstname']" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
</div>
</div>
<div class="clear"></div>
<div class="col_full">
<button class="button button-blue button-mini bottommargin-sm pull-right text-right" type="submit">Save</button>
</div>
<div class="clear"></div>
</div>
Try this for simple validations....
<input type="email" title="Enter Firstname!" class="form-control required email formcontrolheight" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
<span *ngIf="clicked && !detail.firstname || !detail.firstname.trim()" class="error">Error Its empty</span>
<button (click)="clicked = true"></button>
I don't its correct or not but this works fine with me. Refer this code:
<form id="discussion_form" name="discussion_form" ng-submit="addDiscussion(discussion_form.$valid)" novalidate>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="dis_title">Topic<span>*</span></label>
<input type="text" id="dis_title" class="form-control" name="dis_title" placeholder="e.g., about independence day celebration." required ng-model="discussionDetails.dis_title">
<label for="dis_title" class="form_errors" ng-show="discussion_form.dis_title.$invalid && !discussion_form.dis_title.$pristine">Please enter a discussion topic</label><!--To show error msg-->
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right" ng-disabled="discussion_form.$invalid">Submit</button>
In Bootstrap, if I have an input box with label and button in the same row, how do I get the button to align? I don't want to append it to the input box using input-append - any ideas?
<div class="row">
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
From:</label>
<input type="text" class="form-control input-sm" id="txtSchedFromDate" />
</div>
<div class="form-group col-sm-3">
<label for="txtSchedToDate">
To:</label>
<input type="text" class="form-control input-sm" id="txtSchedToDate" />
</div>
<div class="form-group col-sm-3">
<button type="button" id="btnResetEngineers" class="btn btn-default">
Reset Engineers</button>
</div>
</div>
JSFiddle
Many thanks
These are the changes I have made
Just include form-control in the button class and an empty label for the button's div
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
</label>
<button type="button" id="btnResetEngineers" class="form-control btn btn-default">Reset Engineers</button>
</div>
Here's a corrected fiddle
https://jsfiddle.net/Indu9594/rcwyso3x/
I have a simple form containing an input and a submit button. I use bootstrap for responsiveness. When the screen size is md I expect the input field to be aligned with the input as the label is set to col-md-2, the input to col-md-10 and the submit to col-md-10 with an offset of col-md-offset-2. The alignment does not happen the way I expected it to, any ideas why this is happening?
Update
<form method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-md-2 control-label">Label</label>
<div class="col-md-10">
<input type="text" class="form-control" id="inputEmail3" name="name">
</div>
</div>
<div class="form-group" style="height: 50px;">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-success">Done</button>
</div>
</div>
</div>
</form>
See demo here
The issue is you have two form-groups encasing your submit button which shoves it off from the left just a hair.
http://jsfiddle.net/m2rcxdx2/4/
<form method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-md-2 control-label">Label</label>
<div class="col-md-10">
<input type="text" class="form-control" id="inputEmail3" name="name">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-success">Done</button>
</div>
</div>
</form>
Is this what you're looking for?
<form method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" name="name" />
</div>
</div>
<div class="form-group" style="height: 50px;">
<div class="col-md-offset-10 col-md-2">
<input type="submit" class="btn btn-success" value="Submit"></input>
</div>
</div>
</form>
http://jsfiddle.net/f4u6g0zh/