In the edit operation the value of the input box is filled by ng-model. But even though the value is present the validation shows red for input box as it needs a value to be typed.How to overcome this issue
<div class="row row-no-padding" ng-class="{ 'has-error' : schoolform.summary.$invalid || schoolform.summary.$pristine }">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 vz_input">
<input class="form-control" id="summary" name="summary" type="text" value="" placeholder="Summary" ng-model="project.summary" data-fv-field="summary" required jira-type="input" data-type="str">
</div>
</div>
The problem is that you should use && instead of ||. So it will be when the input is invalid and dirty:
<div class="row row-no-padding" ng-class="{ 'has-error' : schoolform.summary.$error.$required && schoolform.$submitted }">
Related
I have a angular code where i am running a text box validation on On Blur .
Now if i don't do any change on use the column, the validation will not run.
What are the alternatives that i can run this validation on may be Page Load or submit click .
Basically i want my validation to run even if that text box is not even touched.
<div class="form-group head2" ng-show="workflowlevel>3">
<label for="approvedAmountFinal" class="col-md-12 col-sm-12 labels"
>Approved Amount:
</label>
<input
ng-disabled="rejectedOrMoreInfo || isviewmode || workflowlevel>5"
type="text"
class=" col-md-6 col-lg-6 col-sm-6 col-xs-6"
id="approvedAmountFinal"
ng-model="$parent.approvedAmountFinal"
ng-blur="validate($parent.approvedAmountFinal);"
name="approvedAmountFinal"
ng-pattern="/^-?[0-9][^\e]*$/"
required
/>
<span
class="error col-md-12 col-sm-12"
ng-show="myForm.raiseFundRequest1.approvedAmountFinal.$touched && myForm.raiseFundRequest1.approvedAmountFinal.$invalid"
>This field cannot be blank.</span
>
<span
class="error col-md-12 col-sm-12"
ng-show="myForm.raiseFundRequest1.approvedAmountFinal.$dirty &&myForm.raiseFundRequest1.approvedAmountFinal.$invalid"
>This is not a valid amount. Please enter valid amount.</span
>
<span class="error col-md-12 col-sm-12" ng-show="isMoreThanRqstAmount"
>Approved amount should be less than or equal to requested amount</span
>
<span
class="error col-md-12 col-sm-12"
ng-show="isApprovedAmountZero&&!rejectedOrMoreInfo"
>Approved amount cannot be zero or lesser.
</span>
</div>
You can use custom directive or ng-pattern (regex) to validate input textbox in angularJS
You can set validation manually on form submit, check bellow code.
this.myForm.raiseFundRequest1.approvedAmountFinal.markAsToched();
this.myForm.raiseFundRequest1.approvedAmountFinal.markAsInvalid();
same for your other ngIf condition set as true, let me know if this things not work.
hi am creating a register form and I want to check using angular if the passwords that the user has entered match. All my validations work (required, min & max length) but i always get the error that the passwords do not match.
My code is as follows
<div class="control-group">
<label class="control-label">Password</label>
<div class="controls" ng-class="{ 'has-error': addCustomerForm.password_1.$touched && addCustomerForm.password_1.$invalid }">
<input type="text" name="password_1" class="form-control input-lg" ng-model="newCustomerInfo.password_1" ng-minlength="4" ng-maxlength="12" required>
<div ng-messages="addCustomerForm.password_1.$error" ng-if="addCustomerForm.password_1.$touched">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">The password is too short.</div>
<div ng-message="maxlength">The password is too long.</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Password (Confirm)</label>
<div class="controls" ng-class="{ 'has-error': addCustomerForm.password_2.$touched && addCustomerForm.password_2.$invalid }">
<input type="text" name="password_2" class="form-control input-lg" ng-model="newCustomerInfo.password_2" ng-minlength="4" ng-maxlength="12" ng-pattern="/^{{password_1}}$/" required>
<div ng-messages="addCustomerForm.password_2.$error" ng-if="addCustomerForm.password_2.$touched">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">The password is too short.</div>
<div ng-message="maxlength">The password is too long.</div>
<div ng-message="pattern">The passwords do not match.</div>
</div>
</div>
</div>
I am thinking that the problem might be in the ng-pattern="/^{{password_1}}$/" but i don't know how i can debug that so i can see the value of the ng-parent.
Any help will be much appreciated!
Andreas.
You want to use ng-pattern="{{newCustomerInfo.password_1}}". password_1 is not defined, and per the doc:
If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$') a.k.a /^abc$/.
I have the following mongoose schema
var MySchema = new Schema({
field1: [{
format: {
type: String,
required: true
},
value: {
type: String,
required: true
}
}],
field2: [{
format: {
type: String,
required: true
},
value: {
type: String,
required: true
}
}]
});
To get the input for this model I am creating a form which has the array of controls and the code is below
Even If if try to use the $scope.field1[<index>] it give the error that
TypeError: Cannot read property 'field1' of undefined
<div class="form-group">
<div class="col-md-12 padding-left-0">
<label for="question">Field1 Values</label>
</div>
<div class="col-md-12" ng-repeat="(optionKey, optionValue) in [0,1]">
<ng-form name="field1Form{{optionKey}}">
<div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_format.$invalid }">
<label for="field1_format">Type</label>
<select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[$index].format" required>
<option value="text" selected="selected">Text</option>
<option value="image">Image</option>
</select>
<div ng-show="submitted && field1Form{{optionKey}}.field1_format.$invalid" class="help-block">
<p ng-show="field1Form{{optionKey}}.field1_format.$error.required">Field1 type is required</p>
</div>
</div>
<div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_value.$invalid }">
<div class="col-md-12">
<label for="field1_value">Value</label>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[$index].value" placeholder="Enter field1 value" required/>
<div ng-show="submitted && field1Form{{optionKey}}.field1_value.$invalid" class="help-block">
<p ng-show="field1Form{{optionKey}}.field1_value.$error.required">Field1 value is required</p>
</div>
</div>
</div>
</ng-form>
</div>
</div>
<div class="form-group col-md-12 padding-left-0" data-ng-show="true">
<div class="col-md-12 padding-left-0"><label>Field2 Values</label></div>
<div class="col-md-6" data-ng-repeat="i in [0,1]">
<ng-form name="field2Form{{i}}">
<label>Value-{{i+1}}</label>
<div class="col-md-12">
<div class="col-md-4" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_format.$invalid }">
<label for="field2_format">Type</label>
<select class="form-control" name="field2_format" id="field2_format" data-ng-model="form.field2[$index].format" required>
<option value="text">Text</option>
<option value="image">Image</option>
</select>
<div ng-show="submitted && field2Form{{i}}.field2_format.$invalid" class="help-block">
<p ng-show="field2Form{{i}}.field2_format.$error.required">Field2 type is required</p>
</div>
</div>
<div class="col-md-7" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_value.$invalid }">
<label for="field2_value">Value</label>
<input type="text" class="form-control" name="field2_value" id="field2_value" data-ng-model="form.field2[$index].value" placeholder="Enter Value {{i+1}}" required/>
<div ng-show="submitted && field2Form{{i}}.field2_value.$invalid" class="help-block">
<p ng-show="field2Form{{i}}.field2_value.$error.required">Field2 value is required</p>
</div>
</div>
</div>
</ng-form>
</div>
</div>
But in the angular controller I am getting the array of object values for field2 but field1 is not coming (missing) from the form data.
But when I hard code the question array like below for field1 then field1 also work fine
<div class="form-group">
<div class="col-md-12">
<ng-form name="field1Form0">
<div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form0.field1_format.$invalid }">
<label for="field1_format">Type</label>
<select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[0].format" required>
<option value="text">Text</option>
<option value="image">Image</option>
</select>
<div ng-show="submitted && field1Form0.field1_format.$invalid" class="help-block">
<p ng-show="field1Form0.field1_format.$error.required">Field1 type is required</p>
</div>
</div>
<div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form0.field1_value.$invalid }">
<div class="col-md-12">
<label for="field1_value">Value</label>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[0].value" placeholder="Enter field1" required/>
<div ng-show="submitted && field1Form0.field1_value.$invalid" class="help-block">
<p ng-show="field1Form0.field1_value.$error.required">Question value is required</p>
</div>
</div>
</div>
</ng-form>
</div>
</div>
Can anyone help me in this?
It seems like some angular issue.
It has been fixed by declaring the variable in angular Controller like below
$scope.form = {};
$scope.form.field1 = {};
Now its working fine. May be the issue in auto declaring the nested objects or array in angular.
It very possible you've got a lot of things mixed up.
One of them you have already recognised - the scope didn't have a form property.
The expression field1Form{{optionKey}}.field1_format.$invalid is not valid, because string interpolation cannot be used in the context where it's found. As far as I know, ng-class and ng-show directives expect a JavaScript expression, not a template. My point is this clearly, the interpolation expression {{optionKey}}, should not be used in ng-class and ng-show directives.
I have input type 'number' and i have setup its min and max length.
I am trying to show error if user enter more than max length or number is invalid.
I have following code. I can see when i inspect element that class change to ng-invalid ng-invalid-max when i enter more than max allowed and tab out.
However,no error message shows on ui.'
Why?
<div class="form-group">
<label class="col-lg-2 control-label">Student</label>
<div ng-class="{ 'has-error' : studentReportForm.RollNumber.$invalid && (studentReportForm.$submitted) }">
<div class="col-lg-4">
<div class="input-group">
<input type="number" class="form-control" name="RollNumber" data-ng-model="studentReport.Details.RollNumber" min="0" max="10000000" />
</div>
<div data-ng-if="studentReportForm.RollNumber.$error.number" class="error">invalid number</div>
<div data-ng-if="studentReportForm.RollNumber.$error.min" class="error">Min 0</div>
<div data-ng-if="studentReportForm.RollNumber.$error.max" class="error">Max 10000000</div>
</div>
</div>
</div>
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