I have three radio buttons: Active, Dissolved, Concluded.
If Active chosen then "Active" is stored in the column in the table.
If Dissolved is chosen then an input with a date picker is displayed. This is the same for Dissolved. Therefore the column is set to nvarchar.
What I'm finding is when I save the screen nothing happens. I stepped through the code and got to this line:
if ($scope.addeditregulatoryapprovalForm.$valid)
$valid evaluates to false. If I hover over it, I see $error, if I expand that I see date, if I expand that I see an array with one element, when I expand that I see the date that is displaying in the input field.
If what I'm seeing is correct and that it's the date that is causing the issue I just don't know why it's causing an issue. I have to pick a date, even if it's the same date that's already picked, before I can save.
Any ideas?
Here's the code:
<div class="col-xs-7 form-inner-group padRt0">
<div class="clearfix stackDate">
<input name="DissolutionConcludedStatusDate" id="DissDate1_0" type="radio" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusID" ng-value="1"> Active<br />
</div>
<div class="clearfix stackDate">
<input name="DissolutionConcludedStatusDate" id="DissDate1_1" type="radio" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusID" ng-change=vm.setDate() ng-value="2">
Dissolved <span ng-if="vm.regulatoryApproval.DissolutionConcludedStatusID==2">
<input class="form-field cal-field" type="text" ng-required="vm.regulatoryApproval.DissolutionConcludedStatusID==2"
name="DissolvedStatusDate"
ng-model="vm.regulatoryApproval.DissolutionConcludedStatusDate"
datepicker-popup="dd-MMM-yyyy" close-text="Close" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusDate"><br />
<div ng-show="addeditregulatoryapprovalForm.submitted || addeditregulatoryapprovalForm.DissolvedStatusDate.$touched">
<span class="error" ng-show="addeditregulatoryapprovalForm.DissolvedStatusDate.$error.required">Please select a Dissolved date</span>
</div>
</span>
</div>
<div class="clearfix stackDate">
<input name="ConcludedStatusDate" id="DissDate1_2" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusID" type="radio" ng-change=vm.setDate() ng-value="3">
Concluded <span ng-if="vm.regulatoryApproval.DissolutionConcludedStatusID==3">
<input type="date" class="form-field cal-field" ng-required="vm.regulatoryApproval.DissolutionConcludedStatusID==3"
name="ConcludedDate"
ng-model="vm.regulatoryApproval.DissolutionConcludedStatusDate"
datepicker-popup="dd-MMM-yyyy" close-text="Close" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusDate"><br />
<div ng-show="addeditregulatoryapprovalForm.submitted || addeditregulatoryapprovalForm.ConcludedStatusDate.$touched">
<span class="error" ng-show="addeditregulatoryapprovalForm.ConcludedStatusDate.$error.required">Please select a Concluded date</span>
</div>
</span>
</div>
</div>
I figured out what the issue was. Because I had to save the date as a string in the database when the form was being saved it was considered invalid because it wanted a date from the datepicker. I had to convert the string to a date when it pulled it from the database before assigning it to the model.
Related
I have validation issue if i use k-ng-model on field that field is not required with Angularjs validation , User can submit the form so below code field is required even i dont select the value user can still submit the form.. Any idea how to solve it ?
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"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && ddChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div>
You can use ng-model with k-ng-model, Try assigning ng-model to a seperate variable and use ng-required.
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" ng-model="challengesDTO.themesKyListValue" ng-required
id="themesList"></select>
This solution worked for me: kendo ui, angular require validation for numeric text box
Just create a hidden input for the each kendo widget and bind the model from your k-ng-model also to the ng-model of the hidden field. The k-ng-model seems to be no NgModelController, which is why the validators cannot hook into the models $validators and do their work.
<input kendo-date-time-picker k-ng-model="$ctrl.event.endDate"></input>
<input type="hidden" name="endDate" ng-model="$ctrl.event.endDate" required></input>
I have a form with many fields, including several datepickers (Angular UI Bootstrap).
<div name="mainForm" ng-form>
<div class="form-group">
<p class="input-group">
<input type="text" name="dt"
class="form-control"
ng-model="dt"
is-open="opened"
datepicker-popup="MM/dd/yyyy" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<p class="text-danger" ng-show="mainForm.$invalid">Invalid!</p>
</div>
I'm using Angular validation w/ the form. We have some required fields, but the dates are not. If you enter a date and remove it, it marks the form invalid. I created a Plunkr to demonstrate this.
Is there a way around this?
Note: It also logs this error in the console when you clear the date out.
Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.
In the current version of the code there is a $datepickerSuppressError value that you can set to true which will hide the console error. You can see in the code that it checks if the date is NaN and then displays the console error if $datepickerSuppressError is still false.
However, having said that, there is still a way to work around the issue of the form being invalid. You will just need to add an additional check to see if mainForm.$error.date is set, or something similar to this.
For example you can change your button to have this instead:
ng-disabled="mainForm.$invalid && !mainForm.$error.date"
Which will leave your button enabled even though the directive has set an error on the date and it should disable if any other field is invalid.
I am working on Angualrjs.below is my code
<form name="myForm" ng-submit="OnClickSubmit())">
<div ng-repeat="ReadItem in SelectedItem" >
<label class="input">
<input type="text" id="txt_{{ReadItem.No}}" ng-model="ReadItem.Quantity" name="Quantity" required />
<div ng-show="myForm.Quantity.$dirty && myForm.Quantity.$error.required" class="note field-error">Required!</div>
<div ng-show="(myForm.Quantity.$dirty && ((5 < ReadItem.Quantity))" class="note field-error">Qty More.</div>
</label>
</div>
<button >order</button>
</form>
i wanted to perform validation on condition only when i click single button order.button is placed bottom of page.it's not added on every row.
1.my form is valid, i mean all field is not empty.
2.and quantity should not grater than 5.
please let me know how to achieve this functionality on multiple row item.
if any condition fail then OnClickSubmit() should not fired.
If I get your question right, ng-disabled and $invalid would be your bestfriend:
<button ng-disabled="myForm.$invalid" >Submit</button>
This will disable your button until all fields required is valid.
I have an ng-repeat which I am using to repeat my JSON data to create Yes/No radio button group on a set of questions.
My $scope.RadioData has the following JSON data:
{
QuestionCd: "Q1"
QuestionTxt: "Some text for the question 1."
ResponseInd: ""
},
{
QuestionCd: "Q2"
QuestionTxt: "Some text for the question 2."
ResponseInd: ""
},
{
QuestionCd: "Q3"
QuestionTxt: "Some text for the question 3."
ResponseInd: ""
},
{
QuestionCd: "Q4"
QuestionTxt: "Some text for the question 4."
ResponseInd: ""
},
{
QuestionCd: "Q5"
QuestionTxt: "Some text for the question 5."
ResponseInd: ""
}
And my HTML is as follows:
<div ng-repeat="radiodata in RadioData" ng-form="RadioForm">
<div class="form-group">
<label for="QuestionTxt" class="col-md-9 radio-inline">
{{radiodata.QuestionTxt}}
</label>
<div class="col-md-3">
<div ng-class="{ 'has-error' : RadioForm.{{radiodata.QuestionCd}}.$invalid }" class="has-error">
<label class="radio-inline">
<input type="radio" name="{{radiodata.QuestionCd}}"
value="T" ng-model="radiodata.ResponseInd" required/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="{{radiodata.QuestionCd}}"
value="F" ng-model="QuestionRemarksData.ResponseInd" required/>
No
</label>
<span ng-show="RadioForm.{{radiodata.QuestionCd}}.$invalid" class="help-block">Required Field !</span>
</div>
</div>
</div>
</div>
My rendered HTML looks like this:
Some text for the question 1. o Yes o No
Some text for the question 2. o Yes o No
Some text for the question 3. o Yes o No
Some text for the question 4. o Yes o No
Some text for the question 5. o Yes o No
[Submit Button]
I have added the 'required' attribute to each radio button, but I am not able to make these radio buttons behave as required. If I have radio group outside ng-repeat, the same code makes it required.
So, how to make these set of questions with radio groups required inside ng-repeat?
Did you try using ng-required="true" instead of the html5 required attribute?
<div ng-repeat="radiodata in RadioData" ng-form="RadioForm">
<div class="form-group">
<label for="QuestionTxt" class="col-md-9 radio-inline">
{{radiodata.QuestionTxt}}
</label>
<div class="col-md-3">
<div ng-class="{ 'has-error' : RadioForm.{{radiodata.QuestionCd}}.$invalid }" class="has-error">
<label class="radio-inline">
<input type="radio" name="{{radiodata.QuestionCd}}"
value="T" ng-model="radiodata.ResponseInd" ng-required="true"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="{{radiodata.QuestionCd}}"
value="F" ng-model="QuestionRemarksData.ResponseInd" ng-required="true"/>
No
</label>
<span ng-show="RadioForm.{{radiodata.QuestionCd}}.$invalid" class="help-block">Required Field !</span>
</div>
</div>
</div>
</div>
Also, as a note, I seem to remember needing to add an ng-click to each option too, to prevent having to click the radio button twice to clear the error...
Having exactly the same problem, and kind of getting crazy with it, this is what I found (pretty new to angularjs so might be I'm making big mistakes):
After doing some tests found that
<span ng-show="RadioForm.{{radiodata.QuestionCd}}.$invalid"
class="help-block">Required Field !</span>
Is always hiding, tried to log to the console, RadioForm.{{radiodata.QuestionCd}}.$invalid and is telling me
$invalid not available in 'undefined'
So I guess the big problem here is how to ask for the 'component status' in the
radio form, seems they are not recognized simply by the name.
I took a look in JS debugger and a very strange thing appear in the radioForm element
it has a "{{radioData.QuestionCd}}" (written exactly that way) as a property, I
might be missing something important here (clearly don't understand this last thing)
Not of much help, but may be this gives some other clue to someone
Having this ordinary (name attribute is requred by server) form with angular and can't figured out how to make validations work. What should i put into ng-show="TODO"
http://jsfiddle.net/Xk3VB/7/
<div ng-app>
<form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
<div ng-repeat="variant in variants" ng-form="variant_form">
<div>
<label>Duration:</label>
<input name="variants[{{$index}}][duration]" ng-model="variant.duration" required />
<span ng-show="TODO">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="variants[{{$index}}][price]" ng-model="variant.price" />
<span ng-show="TODO">Price required</span>
</div>
</div>
</form>
</div>
ps: this is just piece of form, which is more complicated
Thanks
AngularJS relies on input names to expose validation errors.
Unfortunately, as of today it is not possible (without using a custom directive) to dynamically generate a name of an input. Indeed, checking input docs we can see that the name attribute accepts a string only.
Long story short you should rely on ng-form to validate dynamically created inputs. Something like :
<div ng-repeat="variant in variants" >
<ng-form name="innerForm">
<div>
<label>Duration:</label>
<input name="duration" ng-model="variant.duration" required />
<span ng-show="innerForm.duration.$error.required">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="price" ng-model="variant.price" required/>
<span ng-show="innerForm.price.$error.required">Price required</span>
</div>
</ng-form>
Working fiddle here
UPDATE : Base on your serverside requirement why not do something like that :
<input type="hidden" name="variants[{{$index}}][duration]" ng-model="variant.duration"/>
<input name="duration" ng-model="variant.duration" required />
The hidden input will be the one read by the server while the other one will be used to do the client side validation (later discarded by server). It s kind of an hack but should work.
PS : Be sure that your form is valid before actually submitting it. Can be done with ng-submit