hi i am new to angular js i have an aspx page in which i have a div tag which consists of login div and other div tags
i have set ng-app and ng-controller to main div tag and i have used update panel and scriptmanager and above this there is a form tag.
But when i try to show a div on a invalid pattern the div does not get displayed
below is my html
<body onload="heightpx()">
<form name="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="chatwindow" ng-cloak ng-app="s" ng-controller="sChat" class="col-md-4 col-xs-12" style="height: 100%; position: absolute; padding: 0px; float: right; bottom: 0px; right: 0px; z-index: 10001; background: #FFF; border: 1px solid #898989">
<div id="loginform" class="col-md-11 col-xs-11" ng-show="Islogin==false && ExistingCustomer==true" style="margin-top: 5px;">
<div class="form-group">
<input type="text" ng-model="Name" name="Name" placeholder="Name" class="form-control" id="uname" onkeyup="euname();" required ng-pattern="/^(?:[0-9]{1,3}\.){3}/" />
<div class="custom-error" ng-show="form1.Name.$error.pattern">Not a valid subnet, should be i.e. 10.x.y. (3 bytes only)</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
Your Form1 is outside the scope of angular. Therefore angular compiler doesnt read that form.
You can create form tag(loginForm) inside angular app and then use loginForm.Name.$error.pattern. It should work
Related
I want an AngularJS login form to allow for a link to register as a new user:
The link is coded outside the form (see --> and <-- indicators below):
<div layout="row" layout-align="center center">
<div ng-cloak layout="column" style="width: 300px; background-color: white; border: 2px solid rgb(142, 169, 222); padding: 0px 5px 5px 5px">
<form ng-app="WebApp" ng-controller="VendorLoginCtrl" name="userForm">
<div layout="column" layout-align="top left">
<h2 flex>Vendor Login</h2>
<md-input-container flex class="md-block" style="margin: 5px 0px 0px 0px">
<label>User Login</label>
<input name="login" ng-model="user.login" autocomplete="username" required/>
<div ng-messages="userForm.login.$error">
<div ng-message="required">User Login is required.</div>
</div>
</md-input-container>
<md-input-container flex class="md-block" style="margin: 10px 0px 0px 0px">
<label>Password</label>
<input name="password" type="password" ng-model="user.password" autocomplete="current-password" required/>
<div ng-messages="userForm.password.$error">
<div ng-message="required">Password is required.</div>
</div>
</md-input-container>
<md-button class="md-primary" ng-click="login(user)">LOG IN</md-button>
<div class="ng-hide errorMessage" ng-show="loginFailed">Login Failed - Please try again</div>
<div class="ng-hide errorMessage" ng-show="validationFailed">Input Invalid - Please correct and resubmit</div>
</div>
</form>
--><div layout="row" layout-align="center center"><a ng-href="javascript:angular.element(document.getElementById('VendorLoginCtrl')).scope().register();">Not a User? Register here.</a></div><--
</div>
How do I prevent the form validating if the link is clicked?
OK. My href tag needed to be outside the div enclosing the form.
viz:
</form>
</div>
<div layout="row" layout-align="center center">Not a User? Register here.</div>
You can ease up your code by encapsulating ng-app & ng-controller is a separate <div> and the 'Not a User? Register here' link will also be inside the controller this way.
As the register() function will be independent of the validation you can use it using ng-click and it will work like a charm.
The snippet is illustrated bellow:
<div layout="row" layout-align="center center">
<div ng-cloak layout="column" style="width: 300px; background-color: white; border: 2px solid rgb(142, 169, 222); padding: 0px 5px 5px 5px">
--> <div ng-app="WebApp" ng-controller="VendorLoginCtrl" > <--
<form name="userForm">
<div layout="column" layout-align="top left">
<h2 flex>Vendor Login</h2>
<md-input-container flex class="md-block" style="margin: 5px 0px 0px 0px">
<label>User Login</label>
<input name="login" ng-model="user.login" autocomplete="username" required/>
<div ng-messages="userForm.login.$error">
<div ng-message="required">User Login is required.</div>
</div>
</md-input-container>
<md-input-container flex class="md-block" style="margin: 10px 0px 0px 0px">
<label>Password</label>
<input name="password" type="password" ng-model="user.password" autocomplete="current-password" required/>
<div ng-messages="userForm.password.$error">
<div ng-message="required">Password is required.</div>
</div>
</md-input-container>
<md-button class="md-primary" ng-click="login(user)">LOG IN</md-button>
<div class="ng-hide errorMessage" ng-show="loginFailed">Login Failed - Please try again</div>
<div class="ng-hide errorMessage" ng-show="validationFailed">Input Invalid - Please correct and resubmit</div>
</div>
</form>
--> <div layout="row" layout-align="center center">Not a User? Register here.</div> <--
</div>
</div>
I have inputs and labels in inside info class and I want each label and input to align by 1:3 on a single row no matter what the screen size is, plus I won't mind using flex classes, I just want a solution. Cheers
css
.info {
border: 2px solid steelblue;
border-radius: 10px;
padding: 10px;
}
.info input[type = 'text']{
margin: 10px;
padding: 5px;
border: 2px solid orange;
border-radius: 10px;
}
JSX
<div className = 'form'>
<h3 id = 'intro'>Join Us Here</h3><hr/>
<div className = 'info'>
<div>
<label>Business Name:</label> <input type='text' placeholder='Business Name' />
</div>
<div>
<label>Owner Name:</label> <input type='text' placeholder='Owner Name' />
</div>
<div>
<label>Receptionist Name:</label> <input type='text' placeholder='Receptionist Name' />
</div>
</div>
</div>
Although I agree on comments that you should do at least some research and this is simplest flex layout ever it's simple as adding display:flex on parent div and adding flex: 1 and flex: 3 on components.
I am sending you a working solution on codesandbox
https://codesandbox.io/s/wo6z1j23ll
Access AT model object which written in ng-switch ,here ng-switch creates a child scope and the form is created on this scope. Hence the child scope form would not be available on the parent scope.
Please do the help
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<input type="radio" ng-model="fileType" value="Excel" style=" margin-left: 19px;" >Excel
<input type="radio" ng-model="fileType" value="Text" style=" margin-left: 19px;" >Text
<div ng-switch="fileType">
<div ng-switch-default="Excel">
<h4 style="margin-top: 15px;">
<b>Analysis Type </b>
<input type="radio" ng-model="AT" value="SRI" style=" margin-left: 8px;" >SRI
<input type="radio" ng-model="AT" value="JAG" style=" margin-left: 23px;" >JAG
</h4>
<!-- {{AT}} i am able to acess it -->
</div>
<div ng-switch-when="Text">
<h4 style="margin-top: 15px;"></h4>
</div>
</div>
{{fileType}}
{{AT}} <!-- how can i access it -->
</body>
</html>
This is a scope inheritance problem due to ng-switch creating its own scope.
Use ng-model="$parent.AT" within ng-switch block
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<input type="radio" ng-model="fileType" value="Excel" style=" margin-left: 19px;" >Excel
<input type="radio" ng-model="fileType" value="Text" style=" margin-left: 19px;" >Text
<div ng-switch="fileType">
<div ng-switch-default="Excel">
<h4 style="margin-top: 15px;"><b>Analysis Type </b>
<input type="radio" id="atype_sri" ng-model="$parent.AT" value="SRI" style=" margin-left: 8px;" ><label for="atype_sri">SRI</lable>
<input type="radio" id="atype_jag" ng-model="$parent.AT" value="JAG" style=" margin-left: 23px;" ><label for="atype_jag">JAG</label></h4>
</div>
<div ng-switch-when="Text">
<h4 style="margin-top: 15px;"> </h4>
</div>
</div>
{{fileType}}
{{AT}} <!-- now you can access it -->
</body>
</html>
I have 2 radio buttons of the same ng-model now I want to make textbox disabling and enabling on based on first radio button clicking. How to get the individual status of first radio button to enable my text box
<div style="display: flex; padding: 20px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="Every">
<p id="type-recurrence">Every</p>
<input type="text" id="days" ng-model="remind.dailyDays" ng- disabled="!remind.daily">
</div>
<div style="display: flex; padding: 8px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="EveryweekDays">
<p id="type-recurrence">Every WeekDays</p>
</div>
i have created a plunker:https://plnkr.co/edit/6zrIOUwRh7IczufnMGa6?p=preview
html:
<body ng-controller="radioController">
<div style="display: flex; padding: 20px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="Every" ng-click="getRadioValue()">
<p id="type-recurrence">Every</p>
<input type="text" id="days" ng-model="remind.dailyDays" ng-disabled="!flag">
</div>
<div style="display: flex; padding: 8px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="EveryweekDays" ng-click="getRadioValue()">
<p id="type-recurrence">Every WeekDays</p>
</div>
</body>
js:
var APP = angular.module("APP",[]);
APP.controller("radioController", function($scope){
$scope.remind = {};
$scope.getRadioValue = function(){
if($scope.remind.daily == "Every"){
$scope.flag = true;
}
else {
$scope.flag = false;
}
}
})
hope it works!
First of all the ng-model (confirmed) set for the radio button should have a boolean value, and then you can directly use that model for ng-disabled directive of your text field.
//controller
function Controller($scope){
$scope.confirmed=true;
...
}
//html code
<div ng-app>
<div ng-controller="Controller">
<input type="checkbox" ng-model="confirmed" ng-change="change()"/>
<div>{{confirmed}}</div>
<input type="text" id="days" ng-model="remind.dailyDays" ng-disabled="!confirmed">
</div>
</div>
Live Demo # JsFiddle
I have set up radio buttons to display inline on a contact form. They display properly in all tested browsers except IE7, they will not display inline. They are set up using ul and li.
CSS for radio buttons
fieldset div ul {
margin: 5px 0 0 0;
list-style:none;
display:block;
float:left;
}
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:none;
}
fieldset div ul li label {
display: inline;
float: none;
font-size: 1em;
font-weight: normal;
margin: 0;
padding: 0;
}
fieldset div ul li input {
background: none;
border: none;
display: inline;
margin: 0 5px 0 0;
padding: 0;
width: auto;
float:none;
}
HTML for form
<fieldset>
<!-- Your Name -->
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="required"/>
</div>
<!-- Email -->
<div>
<label for="emailAddress">Email</label>
<input type="text" name="emailAddress" id="emailAddress" class="required email"/>
</div>
<!-- Phone -->
<div>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<!-- Contact Time -->
<div>
<label for="contactTime">Best Time to Contact</label>
<ul>
<li><input type="radio" name="contactTime" value="morning" /><label for="morning">Morning</label></li>
<li><input type="radio" name="contactTime" value="day" /><label for="day">Day</label></li>
<li><input type="radio" name="contactTime" value="evening" /><label for="evening">Evening</label></li>
</ul>
</div>
<!-- Contact Method -->
<div>
<label for="contactMethod" style="margin:15px 0 0 0;">Best Method of Contact</label>
<ul>
<li><input type="radio" name="contactMethod" value="phone" /><label for="phone">Phone</label></li>
<li><input type="radio" name="contactMethod" value="email" /><label for="email">Email</label></li>
</ul>
</div>
<!-- Coments -->
<div class="floatLeft" style="margin:10px 0 0 0;">
<label for="mess">Message</label>
<textarea name="mess" id="mess" rows="15" cols="5"></textarea>
</div>
<!-- Controls -->
<div class="controls">
<input id="submit" name="submit" type="submit" value="Contact Us" class="button"/>
</div>
</fieldset>
<input name="url" type="hidden" value="" class="noDisplay"/>
Try setting them to float left -
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:left;
}
Shouldn't affect any other browsers, and should sort out IE7. Don't forget to clear: left; after them though.