I have form with input fields, radio buttons, select boxes. Need submit button make active after when all fields have a data.
example my fields and button.
<div class="form-group" ng-class="{ 'has-error': myForm.birth.$touched && myForm.birth.$invalid }">
<label class="col-sm-3 control-label">{{getWord('Dob')}}<sup>*</sup></label>
<div class="col-sm-6">
<p class="input-group">
<input type="text" placeholder="1988-12-12" class="form-control" name="birth"
uib-datepicker-popup="{{format}}" ng-model="patient.DOB"
data-placeholder=""
is-open="isOpened" datepicker-options="dpOptions"
close-text="Close" alt-input-formats="altInputFormats" required/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openCalender()"><i
class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<p ng-show="myForm.birth.$error.required" style="color:red" ng-if="myForm.birth.$touched">Date of birth is
required.</p>
</p>
</div>
</div>
and code button
<div class="form-group">
<div class="text-center">
<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>
{{getWord('makebutton')}}
</button>
<button class="btn btn-labeled btn-danger" type="button">
<span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>
{{getWord('clearbutton')}}
</button>
</div>
</div>
and need same for clear button, clear all input fields.
Just modify your button code as:
<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()"
ng-disabled="myForm.$invalid">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>
{{getWord('makebutton')}}
</button>
I added ng-disabled="myForm.$invalid" which will disable the button when the any of the input field is not valid.
Related
I use ngx-bootstrap and need modals for Sign In, Sign Up and etc. But i've ran into the problem, where one modal window displays only:
<button type="button" class="btn text-success rounded-0 btn-outline-success" (click)="openModal(template)">Sign In</button>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Sign In </h4>
<button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
<span aria-hidden="true" class="visually-hidden">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" [(ngModel)]="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group mb-4">
<label for="exampleInputPassword1">Password</label>
<input type="password" [(ngModel)]="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<hr>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-secondary mr-2" (click)="close()">Close</button>
<button type="button" class="btn btn-success" (click)="auth()">Submit</button>
</div>
</form>
</div>
</ng-template>
<button type="button" class="btn text-warning rounded-0 btn-outline-warning" (click)="openModal(template)">Sign Up</button>
<ng-template #template>
//Some code for Sign up
</ng-template>
Thank You!
I have list of data comes using ng-repeat and I bound as below.
<div class="col-xs-12" ng-repeat="rl_node in rl.nodes">
<div class="row">
<div class="col-xs-12 col-sm-3">
<span ng-hide="editRoleEntity">{{rl_node.id}}</span>
<input ng-show="editRoleEntity" type="text" class="form-control" id="txtRoleId" ng-model="rl_node.id" placeholder=""/>
</div>
<div class="col-xs-12 col-sm-6">
<span ng-hide="editRoleEntity">{{rl_node.title}}</span>
<input ng-show="editRoleEntity" type="text" class="form-control" id="txtRoleName" ng-model="rl_node.title" placeholder=""/>
</div>
<div class="col-xs-12 col-sm-3 text-right">
<a class="pull-right btn btn-danger btn-xs" ng-click="editEnable(rl_node)" ng-if="!editRoleEntity"><span class="glyphicon glyphicon-trash"></span></a>
<a class="pull-right btn btn-primary btn-xs" ng-click="editRoleEntity = false" ng-if="editRoleEntity"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" ng-click="save(rl_node)" ng-if="editRoleEntity" style="margin-right: 8px;"><span class="glyphicon glyphicon-ok"></span></a>
<a class="pull-right btn btn-primary btn-xs" ng-click="editRoleEntity = true"><span class="glyphicon glyphicon-pencil"></span></a>
</div>
</div>
</div>
I have four button Edit, Save, Cancel & Remove.
The Issue I'm facing is that once making editRoleEntity = true, it makes enable to all row's data
In Above image I tried to edit first row,
Please suggest how I can show textbox only for that row where I click edit icon.
Thanks
Not sure what is the code inside editEnable(rl_node) method; you can have something like this:
function editEnable(rl_node)
{
//depends on how you specify the scope variable - it could be $scope.property or this.property
$scope.selectedNodeId = rl_node.id;
}
and in html:
<span ng-hide="selectedNodeId !== rl_node.id">{{rl_node.id}}</span>
<input ng-show="selectedNodeId === rl_node.id" type="text" class="form-control" id="txtRoleId" ng-model="rl_node.id" placeholder=""/>
I am using angular directive for date picker from UI bootstrap. I also use ng-repeat to add multiple rows. I have added date picker code in ng-repeat. I have displayed these date pickers in bootstrap modal. Also ng-repeat is work fine. But if I add multiple row and click on single calendar icon then all calendar popups of all date picker are shown. I don't know why should this happened. I use is-open="$parent.opened1" to perform click on calendar button. If I use only is-open="opened1" then calendar popoup will open only once (means: can not open after selecting any date). And if I use is-open="$parent.opened1" then after adding multiple rows all calendar popup is open.
Here is my code-
<div class="modal fade bs-example-modal-lg preventiveCarePop" id="preventiveProcess" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<form role="myForm" name="myForm">
<div class="modal-dialog" style="width: 35%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 style="margin: 0px;">
Preventive Care: <span ng-bind="patientObj.firstName"></span>
<span ng-bind="patientObj.lastName"></span><small
class="newSmall"><span> ({{patientObj.gender}}, <i
class="fa fa-mobile fa-lg"></i>:
{{patientObj.contact.mobileNumber}})
</span></small>
</h4>
</div>
<input type="hidden" ng-model="currentReminder" />
<div class="modal-body">
<div id="divActivites" name="divActivites">
<div class="form-group">
<div class="box-placeholder" ng-repeat="preventive in preventive.preventiveDetailsList">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<label for="exampleInputEmail1">Start Date<span
style="color: red;">*</span></label>
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd-MM-yyyy"
ng-model="preventive.startOnDate"
is-open="$parent.opened2"
id="dos-{{$index}}"
datepicker-options="dateOptions" close-text="Close"
placeholder="Select Date" required />
<span class="input-group-btn">
<button type="button" class="btn popUpCal"
ng-click="open($event,'opened2')">
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-lg-4">
<label for="exampleInputEmail1">End Date<span
style="color: red;">*</span></label>
<p class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd-MM-yyyy"
ng-model="preventive.endOnDate"
id="doe-{{$index}}"
is-open="$parent.opened1"
datepicker-options="dateOptions" close-text="Close"
placeholder="Select Date" required />
<span class="input-group-btn">
<button type="button" class="btn popUpCal"
ng-click="open($event,'opened1')" >
<i class="fa fa-calendar"></i>
</button>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-default" ng-click="addDummyPreventive(preventive.preventiveDetailsList,currCaseSheetObjForAddPrv.speciality,preventive.preventiveDetailsList.length)" style="float: right" title="Add new preventive"><i class="fa fa-plus-circle fa-lg"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
Here is my controller
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
I don't know what I use to work all fine.
Please share your idea's.
Thanks in advance.
Please see this demo and comments inside code can be helpful.
Html:
<div class="row" ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt.date" is-open="dt.opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,dt)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
JS:
$scope.open = function($event, dt) {
$event.preventDefault();
$event.stopPropagation();
dt.opened = true;
};
<form class="stdform stdform2" name="projectForm" ng-submit="saveProject(project, projectForm)"
novalidate="novalidate">
<p>
<div class="par control-group" ng-class="{'has-error': projectForm.projectName.$invalid && (projectForm.projectName.$dirty || submitted)}">
<label class="control-label" for="projectname">Name</label>
<div class="controls">
<span class="field">
<input id="projectname" type="text" ng-model="project.name" name="projectName" class="form-control"
required/>
<label ng-show="projectForm.projectName.$error.required && (projectForm.projectName.$dirty || submitted)"
class="error" for="projectname">Please type project name</label>
</span>
</div>
</div>
</p>
<p>
<label>Description</label>
<span class="field">
<textarea ng-model="project.description" name="projectDescription"
style="resize: vertical; height: 110px;" class="form-control input-default"></textarea>
</span>
</p>
<p class="stdformbutton">
<button class="btn btn-default" ui-sref="app.project.list">Cancel</button>
<button class="btn btn-primary" type="submit">{{saveMessage}}</button>
</p>
</form>
Why after pressing the 'Enter' key on keyboard am I redirected to app.project.list instead of having the saveProject(project, projectForm) function executed?
The default type for buttons is submit. You have to explicitly unset it to "button" to avoid the submit action:
<p class="stdformbutton">
<button class="btn btn-default" type="button" ui-sref="app.project.list">Cancel</button>
<button class="btn btn-primary" type="submit">{{saveMessage}}</button>
</p>
You can also set the type="reset" if you want it to clear out the input values.
I am working on it for a long time.
I have 2 radio buttons when any of them is clicked
1)it should be checked
2)a modal should appear
For the first time it works just fine, but the second time I choose the other button it won't be checked but it is checked logically just not show on the screen!
here is my code
<input type="radio" data-toggle="modal" data-target=".bs-example-modal-sm" ng-model="choice.tel" value="1" name="tel" > cell phone <br/>
<input type="radio" data-toggle="modal" data-target=".bs-example-modal-sm" ng-model="choice.tel" value="2" name="tel" > home phone <br/>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<label>telephone (comma-separated)</label>
<input type="text" name="phone" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" >Save changes</button>
</div>
</div>
</div>
</div>