i am getting swallowed by an issue.
I have this code currently
<div ng-repeat="list in ConnectivityDetails">
<div class="connectivity">
<div class="title">
Disable Connectivity??</div>
<div class="decision">
<p style="float: left;">
<input type="checkbox" ng-checked="list.Connectivity"/>
<label for="Yes">
</label>
<span class="spans">Yes</span>
</p>
<p>
<input type="checkbox" ng-model="list.Connectivity"/>
<label for="No">
</label>
<span class="spans">No</span>
</p>
</div>
</div>
</div>
Problem:
I am getting both the text boxes checked though the returning object is having only one value, how to bind true (Yes) for the checkbox and false (NO) for the other?
My Object Contains this:
var data = [{PracticeID: "1",Connectivity: "true", LabKey: "2154879",PracticeKey: "ABNCJFUE", CloudServiceURL: "ABC215947"}]";
I want to bind Connectivity value to one of the checkboxes
Help!
Thank you
Fiddle: http://jsfiddle.net/ymZdx/3/
So it should be:
<p style="float: left;">
<input type="checkbox" ng-model="list.Connectivity" />
<label for="Yes">
</label>
<span class="spans">Yes</span>
</p>
<p>
<input type="checkbox" ng-model="list.Connectivity" ng-true-value="false" ng-false-value="true" />
<label for="No">
</label>
<span class="spans">No</span>
</p>
Related
I'm new to AngularJS. I need to show <p> when checkbox is checked = true. Currently <p> is showing when mouse hover-over. instead of that I need to show <p> when sendSMS is checked = true my code as follows,
<div class="col-xs-12">
<div class="form-group label-floating" ng-class="{'is-empty': vm.checkInData.telephone === null}">
<label for="phone" class="control-label">xxx-xxx-xxxx</label>
<input type="text" class="form-control" ng-model="vm.checkInData.telephone" id="phone"
ng-pattern="/^[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4}$/" name="phone" required>
<div ng-messages="vm.inputForm.phone.$error" ng-show="vm.formSubmitted || vm.inputForm.phone.$touched">
<div class="ngMessage" ng-message="required">Phone number is required.</div>
<div class="ngMessage" ng-message="pattern">Phone number should be a valid 10 digit one.</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vm.checkInData.sendSMS"> Receive text updates
</label>
</div>
<p class="help-block">Message & data rates may apply.</p>
</div>
</div>
</div>
How can I do that.
<p class="help-block" ng-if="vm.checkInData.sendSMS">Message & data rates may apply.</p>
you could toggle the visibility of the p tag by using the ng-if.
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 am trying to validat my form and i done it but the problem is when i click the button without entering any input value it is getting saved and i dont want to disable the button.I need a condition that if i click on submit it should show the fields error that are empty.Can anyone please suggest help.
<div class="loginformcss nopadding">
<form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="col_full">
<input type="text" [formControl]="form.controls['firstname']" id="login-form-firstnamee" name="login-form-firstname" value="" placeholder="First Name" class="form-control not-dark">
<span *ngIf="form.controls['firstname'].touched">
<span *ngIf="!form.controls['firstname'].valid" >
<p class="error">Field required</p>
</span>
</span>
</div>
<div class="clear"></div>
<div class="col_full">
<input type="text" [formControl]="form.controls['lastname']" id="login-form-password" name="login-form-password" value="" placeholder="Last Name" class="form-control not-dark">
<span *ngIf="form.controls['lastname'].touched" >
<span *ngIf="!form.controls['lastname'].valid" >
<p class="error">Field required</p>
</span>
</span>
</div>
<div class="clear"></div>
<div class="col_full">
<input type="text" [formControl]="form.controls['profilename']" id="login-form-username" name="login-form-username" value="" placeholder="User Name" class="form-control not-dark">
<span *ngIf="form.controls['profilename'].touched" >
<span *ngIf="!form.controls['profilename'].valid" >
<p class="error">Field required</p>
</span>
</span>
</div>
<div class="clear"></div>
<div class="col_full nobottommargin">
<button class="col-xs-12 button button-small button-3d nomargin" id="login-form-submit" name="login-form-submit" value="login" >Login</button>
</div>
<div class="clear"></div>
The easiest way is to add required attribute to your input
I have a list of animals and there are 2 sets of radio buttons against each animal- extinct(y or n), habitat(land or water).
If user selects extinct as y for an animal then habitat radio buttons get disabled.
If user selects extinct as n, then habitat radio button will be enabled and user can select either land or water as habitat.
And on change of value of the radio button I call a function, where I am getting the selected value. Now the problem is for both radio buttons I get the same value ie (y or n). How to get proper values ie y or n for extinct and land or water for habitat.
here is the code.. i have modified the names.
HTML content
<fieldset>
<legend>List of Animals</legend>
<div class="row" ng-repeat=" animal in animals">
<label class="col-md-2 text-info">{{ animal }}:</label>
<label class="col-md-1 text-info"> Extinct</label>
<div class="col-md-1">
<input id="{{animal}}extinctY" type="radio" name="{{animal}}extinct" data- ng-model="value" value="{{animal}}|Y" ng-change="getExtinct(value1)"/>
</div>
<label class="col-md-1 text-info">Y</label>
<div class="col-md-1">
<input id="{{animal}}extinctN" type="radio" name="{{animal}}extinct" data-ng-model="value" value="{{animal}}|N" ng-change="getExtinct(value1)" required="required"/>
</div>
<label class="col-md-1 text-info">N</label>
<label class="col-md-1 text-info"> Habitat</label>
<div class="col-md-1">
<input id="{{animal}}habitatL" type="radio" name="{{animal}}habitat" ng-checked="{{animal}}checked" ng-model="value" value="{{animal}}|L" ng-disabled="{{animal}}disabled" ng-change="getHabitat(value)"/>
</div>
<label class="col-md-1 text-info">Land</label>
<div class="col-md-1">
<input id="{{animal}}habitatW" type="radio" name="{{animal}}habitat" ng-checked="{{animal}}checked" ng-model="value" value="{{animal}}|W" ng-disabled="{{animal}}disabled" ng-change="getHabitat(value)"/>
</div>
<label class="col-md-1 text-info">Water</label>
</div>
<br/>
</fieldset>
JS content
$scope.animals= ['Zebra', 'Dinosaur', 'Whale', 'Antilon'];
$scope.getExtinct= function getExtinct(extinct) {
alert(extinct); // Here it displays Zebra|N
};
$scope.getHabitat = function getHabitat(habitat) {
alert(habitat); // Here also it displays Zebra|N instead of Zebra|L
};
The easiest way to get around this is to make the animals. I created a plunkr to demonstrate. http://plnkr.co/edit/s45WEnCbRvBL2CRmjbut?p=preview
Then you can evaluate the ng-disabled, ng-value, etc. using the keys.
<fieldset ng-controller="AnimalCtrl">
<legend>List of Animals</legend>
<div class="row" ng-repeat=" animal in animals">
<label class="col-md-2 text-info">{{ animal.name }}:</label>
<label class="col-md-1 text-info"> Extinct</label>
<div class="col-md-1">
<input type="radio" name="{{animal.name}}extinct" ng-model="animal.extinct" value="true" />
<label class="col-md-1 text-info">Y</label>
</div>
<div class="col-md-1">
<input type="radio" name="{{animal.name}}extinct" ng-model="animal.extinct" value="false" required/>
<label class="col-md-1 text-info">N</label>
</div>
<label class="col-md-1 text-info"> Habitat</label>
<div class="col-md-1">
<input type="radio" name="{{animal}}habitat" ng-model="animal.habitat" value="land" ng-disabled="animal.extinct == 'true'" />
<label class="col-md-1 text-info">Land</label>
</div>
<div class="col-md-1">
<input type="radio" name="{{animal}}habitat" ng-model="animal.habitat" value="water" ng-disabled="animal.extinct == 'true'" />
<label class="col-md-1 text-info">Water</label>
</div>
</div>
</fieldset>
I have a strange issue with a radio input not populating the model of an angular form.
All fields populate the model except for the radio input...
The radio input is given at the beginning of the form below. I use ng-inspector and I can see that signupForm.member.role does not get populated when I click one of the radio values.
Can someone please help?
<form name="formCtrl" ng-submit="signup(formCtrl)" class="col-xs-12" novalidate role="form">
<h4>{{'SIGNUP_FORM_ROLE_PREFIX' | translate}}</h4>
<div class="btn-group Choix col-xs-12 text-center" data-toggle="buttons" ng-class="getCssClasses(formCtrl, formCtrl.signupRole)">
<label class="btn StateButton col-xs-6">
<img class="img-responsive" src="assets/media/img/parents.svg" />
<input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_PARENTS" ng-required="true" />
<span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_PARENTS' | translate}}</span>
</label>
<label class="btn StateButton col-xs-6">
<img class="img-responsive" src="assets/media/img/professionel.svg" />
<input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_CHILDCARE_WORKER" ng-required="true" />
<span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_CHILDCARE_WORKER' | translate}}</span>
</label>
<div ng-messages="formCtrl.signupRole.$error" ng-if="formCtrl.$submitted">
<div ng-message="required" class="control-label">{{'SIGNUP_FORM_ROLE_REQUIRED'| translate}}</div>
</div>
</div>
<hr>
<div class="form-group" ng-class="getCssClasses(formCtrl, formCtrl.firstName)">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon icon-Prenom" aria-hidden="true"></span>
</span>
<input type="text" name="firstName" ng-minlength="2" placeholder="{{'SIGNUP_FORM_FIRST_NAME' | translate}}" ng-model="signupForm.member.firstName" ng-required="true" class="form-control" />
<span ng-if="isSuccessFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Valid" aria-hidden="true"></span></span>
<span ng-if="isErrorFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Erreur" aria-hidden="true"></span></span>
</div>
<div ng-messages="formCtrl.firstName.$error" ng-if="formCtrl.$submitted">
<div ng-message="required" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate}}</div>
<div ng-message="minlength" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate }}</div>
</div>
</div>
</form>
Here is a working plunker: http://plnkr.co/edit/lsaevbL0mBRku7zcrGDJ
One can notice that the radio is not taken into account when the form is submitted even if one of the radios is selected...
Simply use value instead of ng-value. Please see this working demo: http://plnkr.co/edit/2EB4NvTO1StN50NIXOyn?p=preview.
You should not use ng-value, which is looking for $scope.ROLE_BASIC_PARENTS.
Check AngularJS.org, the example there use:
<input type="radio" ng-model="color.name" ng-value="specialValue">
And in the controller:
$scope.specialValue = {
"id": "12345",
"value": "green"
};