I have angularJS validation issue with below field , if i use ng-model its not making form $valid even the value is selected, So i used k-ng-model now this field is out of the validation scope, Any suggetion will be appreciated.
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
ng-model-options="{updateOn: 'blur'}"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && addChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div
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 not able to dynamically set required attribute to input fields
My form's required attribute has to change dynamically based on a radio button field.
This is how the form looks when the radio button is set as wants to join screenshot. and when radio button is set as member/alumnus the form looks like this screenshot
I am not able to dynamically switch the required attribute for input fields in respective forms.
This is the code for contact and DOB field if new Member is checked
<label class="control-label is-imp"></label>
<div class="input-group">
<input type="radio" ng-model="joinFormData.joinType" value="wantsToJoin">I Want to join as member
<input type="radio" ng-model="joinFormData.joinType" value="alreadyMember">I am a member/alumnus
</div>
</div>
<div class="form-group no-pad-left" ng-if="joinFormData.joinType == 'wantsToJoin'">
<div class="nss-only" ng-if="clubType == 'NSS'">
<div class="form-group col-md-12 no-pad-left no-pad-right">
<div class="col-md-6 no-pad-left">
<label class="control-label is-imp">Contact:</label>
<input
type="text" class="form-control" id="body_contact"
name="body_contact" ng-model="joinFormData.contact" placeholder="1234567890" ng-pattern="/^[0-9]{10}$/" ng-minlength="10" ng-maxlength="10" integer [ng-required]="joinFormData.joinType == 'wantsToJoin'">
<span ng-show="joinForm.body_contact.$error.$invalid || joinForm.body_contact.$error.pattern"><span class = "red-color">Enter a valid number!</span></span>
</div>
<div class="col-md-6 no-pad-right">
<label class="control-label is-imp">DOB:</label>
<input
type="date" class="form-control" id="body_dob"
name="body_dob" ng-model="joinFormData.dob"
required ng-maxlength="100" required>
<span ng-show="joinForm.body_dob.$error.required && joinForm.body_dob.$touched"><span class="red-color">Required!</span></span>
</div>
</div> </div> </div>
This is the code for select type field if Member/ Alumnus is checked
<div class="form-group col-md-12 no-pad-left no-pad-right">
<div class="col-md-6 no-pad-left" ng-if="joinFormData.joinType == 'alreadyMember'">
<label class="control-label is-imp">I am already a member/alumnus:</label>
<div class="input-group">
<select ng-model="joinFormData.memberType"
class="form-control selectpicker" [required]="joinFormData.joinType == 'alreadyMember'" name="body_type">
<option value="" selected disabled>Select Type</option>
<option value="member">Member</option>
<option value="alumni">Alumni</option>
</select>
<!-- <span ng-if="!joinForm.body_type.$valid && joinForm.body_type.$touched"><span class="red-color">Required!</span></span> -->
</div>
</div></div>
I tried using [required]="joinFormData.joinType == 'alreadyMember'" conditions but that didn't work.
Kindly help me out. I am not able to figure out the mistake as i am new to angular
I'm having a hard time to display a message when an input is valid. To display error messages, it is working alright. This is what I'm trying:
<form>
...
<div class="form-group">
<label class="col-xs-2 control-label" for="inputSuccess">Username</label>
<div class="col-xs-10">
<input type="text" id="inputUser" name="usernameInput" class="form-control textbox"
placeholder="Digite seu Username" width="25" ng-model="username.value"
ng-minlength="4" ng-maxlength="10" valid="validateForm.usernameInput.$valid" required>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
<div class="error-message" ng-message="required">*This field is required</div>
<div class="error-message" ng-message="minlength">*Username too short</div>
<div class="error-message" ng-message="maxlength">*Username too long</div>
</div>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$valid">
<div class="valid-message" ng-message="valid">valid!</div>
</div>
</div>
</div>
</form
I also tried to set "ng-message" with the $valid ng-model but to no avail. Any tips?
your form wasn't named
the value of ng-messages should be an object containing a property/properties that you want to validate against. eg input.$error can have in your case required,minlength or maxlength. its different for $valid because that has true/false values, so we check for the property $valid on the object usernameInput for true/false
the value of ng-message should be the name of the property to check on the containing block's ng-messages value object. if the value of the property is truthy you see the content, and you dont if its falsy.
ng-messages/ng-message probably isnt the right solution for your case since you're checking one value and displaying one message.
TLDR
ng-messages : name of object*
ng-message : name of property of object*
if the value of property is truthy, content of ng-message shows... falsy, nothing shows.
angular.module('formDemo', ['ngMessages']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular-messages.js"></script>
<body ng-app="formDemo">
<form name="validateForm">
...
<div class="form-group">
<label class="col-xs-2 control-label" for="inputSuccess">Username</label>
<div class="col-xs-10">
<input
type="text"
id="inputUser"
name="usernameInput"
class="form-control textbox"
placeholder="Digite seu Username"
width="25"
ng-model="username.value"
ng-minlength="4"
ng-maxlength="10"
required>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
<div class="error-message" ng-message="required">*This field is required</div>
<div class="error-message" ng-message="minlength">*Username too short</div>
<div class="error-message" ng-message="maxlength">*Username too long</div>
</div>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput">
<div class="valid-message" ng-message="$valid">valid!</div>
</div>
</div>
</div>
</form>
</body>
add "required" attribute to the input tag
else to avoid manipulation through inspection-tool, PHP works,
if(empty($_POST['usernameInput']))
{
echo "Error!"
}
you can simply use ng-if with validateForm.usernameInput.$valid to control showing valid messages. mention that this block should be put outside ng-message block.
<div ng-if="validateForm.usernameInput.$valid">
valid!
</div>
PLUNKER DEMO
comment: you missed validateForm at your form tag, I think this is typo.
I have few controls on Angular Js form and submit button. I am also validating if the fields are empty or not. However, even when all data are entered, the form is not getting submitted. Below is the sample code which I have:
Index.cshtml
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container" ng-show="createMenu">
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
//other controls
<input type="submit" value="Submit" ng-click="submitted=true" />
Is there any identifier or way to check which control has invalid data?
Thanks
For debugging purposes you can just print out the $error property of the form controller:
<pre ng-bind="mainForm.$error | json"></pre>
This will immediately show you which model isn't valid.
I have a simple code :
<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">
<div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisName" ng-model="aDiagnosis.Name" ng-disabled="true">
</div>
<div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisResult" ng-maxlength="200" ng-model="aDiagnosis.Result" />
<p class="help-block" ng-if="form.aDiagnosisResult.$error.maxlength">Too Large</p>
</div>
</div>
and use $scope.form.$valid to generate the error message.
But problem is since use ng-repeat every time it finds the same name and when i want to generate second list by clicking a button ,,first error message is gone and error-message now works on the second text (obviously).
So How can i generate error-message each and every time dynamically ,,so every text form in ng-repeat,it has it's own error-message.
You can generate dynamically name attribute of your inputs in ng-repeat. For example, you can put $index (or id of your objects or whatever you want) to generate unique name for your inputs.
<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">
<div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisName-{{$index}}" ng-model="aDiagnosis.Name" ng-disabled="true">
</div>
<div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisResult-{{$index}}" ng-maxlength="200" ng-model="aDiagnosis.Result" />
<p class="help-block" ng-if="form['aDiagnosisResult-' + $index].$error.maxlength">Too Large</p>
</div>
</div>
Example on plunker.