I have a radio button which works fine if I remove Angularjs but if I added the Angularjs code it doesn't have a default selected/checked value.
I have the same ng-model="frm.mode" but still nothing is selected by default.
HTML
<div class="border-bottom border-color-1 border-dotted-bottom">
<div class="p-3" id="basicsHeadingThree">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="thirdstylishRadio1" ng-model="frm.mode" value="DELIVERY" name="mode" checked>
<label class="custom-control-label form-label" for="thirdstylishRadio1"
data-toggle="collapse"
data-target="#basicsCollapseThree"
aria-expanded="false"
aria-controls="basicsCollapseThree">
Delivery
</label>
</div>
</div>
<div id="basicsCollapseThree" class="collapse show border-top border-color-1 border-dotted-top bg-dark-lighter"
aria-labelledby="basicsHeadingThree"
data-parent="#basicsAccordion1">
<div class="p-4">
cash on delivery
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="border-bottom border-color-1 border-dotted-bottom">
<div class="p-3" id="basicsHeadingOne">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="stylishRadio1" ng-model="frm.mode" value="PICKUP" name="mode">
<label class="custom-control-label form-label" for="stylishRadio1"
data-toggle="collapse"
data-target="#basicsCollapseOnee"
aria-expanded="true"
aria-controls="basicsCollapseOnee">
Pickup
</label>
</div>
</div>
<div id="basicsCollapseOnee" class="collapse border-top border-color-1 border-dotted-top bg-dark-lighter"
aria-labelledby="basicsHeadingOne"
data-parent="#basicsAccordion1">
<div class="p-4">
pickup order
</div>
</div>
</div>
Related
I am using md-datepicker from angular material. It is working fine except on bootstrap modal. I have applied various solutions like z-index:1200 but none of them proves useful for me.
Following libraries I am using:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" />
It shows the area when I use inspect element:
Here is the Modal Code:
<!-- Bootstrap Modal for Add an Event -->
<div class="modal fade" id="AddEvent" role="dialog">
<div class="modal-dialog">
<form ng-submit="addNewEvent()">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> <span class="team-member-icon"><img class="" ng-src="home/img/event-star.svg"></span> Add Event</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="add-member-modl">
<div class="form-group">
<label>Event Name</label>
<input ng-model="newEvent.name" type="text" ng-focus="focusInput = true" class="form-control" placeholder="Mehndi" ng-required="true">
<input type="hidden" ng-model="newEvent.event_id">
<ul class="advance_search_inner" ng-show="focusInput">
<li ng-repeat="event in events| filter:newEvent.name" ng-click="newEvent.name = event.name; focusInput = false; newEvent.event_id = event._id">
{{event.name}}
</li>
</ul>
</div>
<div class="form-group">
<label>Date</label>
<md-datepicker md-open-on-focus ng-model="newEvent.start_date"></md-datepicker>
</div>
<div class="form-group">
<label>Duration</label>
<select class="form-control" ng-model="newEvent.duration">
<option value="1 Day">1 Day</option>
<option value="2 Days">2 Days</option>
<option value="3 Days">3 Days</option>
</select>
<!--<input type="text" class="form-control" ng-model="newEvent.duration" placeholder="1 Day(s)" ng-required="true">-->
</div>
</div>
</div>
<div class="modal-footer mod-footr">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>
</div>
Probably the z-index of the modal is higher than the date picker selector. Try to change the datepicker z-index with the following css:
.md-datepicker-calendar-pane {
z-index: 2000;
}
This is the HTML file. There is no used in this. There are two buttons in this HTML. Using angularJS2( typescript )
<div class="visitor-entry form-group">
<!-- [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}"-->
<div class="ui-input-group">
<input #vName="ngModel" type="text" class="form-control" placeholder="Name*" name="visitorName" [(ngModel)]="visitorName">
<span class="input-bar"></span>
</div>
<div class="ui-input-group">
<input type="text" class="form-control" placeholder="Mobile" name="visitorMob" [(ngModel)]="visitorMob">
<span class="input-bar"></span>
</div>
<div class="add-btn-cont">
<button [disabled]="vName.errors" class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor();"></button>
</div>
</div>
<div class="block search-add-list active">
<h6>Person Affected
<button class="icon-btn pull-right addNewBtn" title="Add New" data-toggle="modal" id="personAffectedBtn" (click)="addNewPerson(personAffectedCode)></button>
</h6>
</div>
Here I want to validate the visitorName field mandatory, and add the class [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}. . THis should be validated only for first button click.
But if I add required to visitorName field then it is validating for both the button clicks.
How can I solve this issue.
You can set the value of required on button click
<div class="visitor-entry form-group" >
<!-- [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}"-->
<div class="ui-input-group" >
<input #vName="ngModel" type="text" class="form-control" placeholder="Name*" name="visitorName" [(ngModel)]="visitorName" [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}" [required]="{{reqVal}}">
<span class="input-bar"></span>
</div>
<div class="ui-input-group">
<input type="text" class="form-control" placeholder="Mobile" name="visitorMob" [(ngModel)]="visitorMob">
<span class="input-bar"></span>
</div>
<div class="add-btn-cont">
<button [disabled]="vName.errors" class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor();reqVal=false"></button>
</div>
</div>
<div class="block search-add-list active">
<h6>Person Affected
<button class="icon-btn pull-right addNewBtn" title="Add New" data-toggle="modal" id="personAffectedBtn" (click)="addNewPerson(personAffectedCode);reqVal=true"></button>
</h6>
</div>
I am using Angular js, in which i have a textbox outside and an ng-repeat containing textbox and textarea. I want to check if the fields contain value when submit button is clicked. I am able to achieve the functionality for controls outside ng-repeat, but not sure how to achieve required field validation within ng-repeat, when submit button is click. Below is the existing code:
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate>
<div ng-controller="testController" ng-init="init()">
<div>
<label>Name :</label>
</div>
<div>
<input type="text" maxlength="150" required ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<div class="row">
<div class="form-group ">
<label>Language</label>
<label>Title</label>
<label>Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div>
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div>
<input type="text" maxlength="150" name="titleValidate[]" ng-model="Descriptions.Title" />
</div>
<div>
<textarea maxlength="500" name="descriptionValidate[]" noresize ng-model="Descriptions.Description"></textarea>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer"><img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) ||testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" /> </a>
</div>
</div>
</div>
</div>
<input type="submit" value="Submit" ng-click="submitted=true"/>
How to use required field validation for controls within ng-repeat using angular js?
Thanks
You could use $index to track the name of the different inputs in your ng-repeat.
<div ng-repeat="Descriptions in testsWithDescription ">
<input type="text"
maxlength="150"
name="titleValidate_{{$index}}"
ng-model="Descriptions.Title"
required />
</div>
You can now use the common validations from AngularJS like you already did: mainForm.$valid.
I have a form with some contents and some buttons. What I want to do is by clicking a button, hide the original contents of the form and load some new contents. Now I have done the hiding part using ng-show . But i'm stuck at loading new contents using ng include. I have included the contents that I want to show inside script tags and tried to load on button click.
This is what I have done.
<!DOCTYPE html>
<html lang="en">
<div class="container">
<form role="form" id="info_form" name="info_form" ng-controller="infoCtrl" ng-app="app" novalidate>
<section class="content-header">
<h1>
Fill your medical information
<!--<small>Optional description</small>-->
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="box">
<div class="box-body" ng-show="table_remove" >
<div>
<div class="col-lg-12">
<div style="margin-top: 15px;width: 100%;">
<!--first block-->
<div style="float: left;width: 33%;height: 100%">
<div class="form-group">
<label class="info_ques_text">Maximum Heart Rate</label>
<div class="input-group">
<input class='input' type="number" name="Heart" id="Heart" class="form-control" ng-model="data.heart_rate" placeholder="Enter Value" required><br>
<span class="error_msg" ng-show="submitted && info_form.Heart.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
<!--third block-->
<div class="form-group">
<label class="info_ques_text">How Long Do You Work Per Day?</label>
<div class="input-group">
<select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">4-5 Hours</option>
<option value="1">5-6 Hours</option>
<option value="2">6-7 Hours</option>
<option value="3">More than 7 Hours</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer" ng-show="table_remove">
<button href="" type="submit" ng-click="submitted = true; train(data);" class="btn btn-primary">Train data</button>
<button href="" type="submit" ng-click="submitted = true; submit(data); template = 'predictview'" class="btn btn-primary">Submit</button>
<a type="button" class="btn btn-danger" href="{{url()}}/admin/organizations/view">Cancel</a>
</div>
</div>
<ng-include src="template"></ng-include>
<script type="text/ng-template" id="predictview">
<div class="container" ng-controller="questionEditCtrl" >
<form class="form-horizontal" role="form" name='quizAdd' ng-submit="submit(data2)">
<a> New page </a>
</form>
</div>
</script>
</section><!-- /.content -->
</form>
</div>
</html>
I make a tab panel and declare it as form type, then i put validation ng-disabled in button& tab. i want the button available after i finish fill up two form,my button is disabled at first but when i finish fill up "first" form then it able to clicked. And also tab, it never disabled...
<div class="panel-body">
<form class="tab-content form-horizontal"name="formData" novalidate>
<div id="form-views" ui-view></div>
</form>
here my code:
button
<button type="button" ng-click="addPost()"
ngdisabled="formData.$invalid" class="btn btn-success">Submit
</button>
tab
<div class="col-lg-12 col-sm-12">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="panel panel-tab rounded shadow">
<div class="panel-heading1 no-padding">
<ul class="nav nav-tabs nav-pills">
<li class="active" ui-sref=".personal" >
<a data-toggle="tab">
<i class="fa fa-user"></i>
<div>
<span class="text-strong">Step 1</span>
<span>Personal</span>
</div>
</a>
</li>
<li class="" ui-sref-active="active" ui-sref=".test" ng-disabled="formData.$invalid">
<a data-toggle="tab" >
<i class="fa fa-file-text"></i>
<div >
<span class="text-strong">Step 2</span>
<span>Test Date</span>
</div>
</a>
</li>
<li class="" ui-sref-active="active" ui-sref=".testDetail">
<a data-toggle="tab" >
<i class="fa fa-credit-card"></i>
<div>
<span class="text-strong">Step 3</span>
<span>Test Details</span>
</div>
</a>
</li>
</ul>
</div>
<div class="panel-sub-heading">
<div class="inner-all">
<progressbar class="progress-striped active no-margin progress-xs" value='20' max="100" type="success"><i></i></progressbar>
</div>
</div>
<div class="panel-body">
<form class="tab-content form-horizontal" name="formData"novalidate>
<div id="form-views" ui-view></div>
</form>
</div>
</div>
</div>
this is my "personal details" tab
<div class="tab-pane inner-all" id="tab3-1">
<h4 class="page-header">Personal</h4>
<div class="form-group">
<label class="col-sm-2">Name</label>
<div class="col-sm-6" ng-class="{ 'has-error' : formData.name.$invalid && !formData.name.$pristine }">
<input class="form-control" name="name" placeholder="Enter name" ng-model="formData.ngCandName" required>
<p ng-show="formData.name.$invalid && !formData.name.$pristine" class="help-block">Candidate name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : formData.background.$invalid && !formData.background.$pristine }">
<label class="col-sm-2">University</label>
<div class="col-sm-6">
<input class="form-control" name="background" placeholder="Background" ng-model="formData.ngCandBackg" required>
<p ng-show="formData.background.$invalid && !formData.background.$pristine" class="help-block">Candidate background is required.</p>
</div>
</div>
<div class="form-group mb-0" >
<label class="col-sm-2">Gender</label>
<div class="col-sm-6" >
<div class="rdio rdio-theme inline mr-10">
<input type="radio" id="male3" ng-model="formData.gender" name="radio" value="male" required >
<label for="male3">Male</label>
</div>
<div class="rdio rdio-theme inline">
<input type="radio" id="female3" name="radio" ng-model="formData.gender" value="female" required>
<label for="female3">Female</label>
</div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : formData.tel.$invalid && !formData.tel.$pristine }">
<label class="col-sm-2" >Telephone number</label>
<div class="col-sm-6">
<input type="number" ng-maxlength="11" class="form-control" name="tel" placeholder="Telephone number" ng-model="formData.ngCandTel" required>
<p ng-show="((formData.tel.$invalid && !formData.tel.$pristine))" class="help-block">Please insert telephone number.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : formData.Email.$invalid && !formData.Email.$pristine }">
<label class="col-sm-2">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="Email" placeholder="Email" ng-model="formData.ngCandEmail" required>
<p ng-show="formData.Email.$error.email" class="help-block">Candidate Email is invalid.</p>
</div>
</div>