I cannot use requiredattribute as the ion-input (email) field is conditionally required. Also I do not want to check everytime the form is submitted to fire invalid email unless and until the email (ion-input) has some text input and it is not a valid email.
This is what I've done so far:
<ion-item >
<ion-label stacked>{{'email' | translate}}</ion-label>
<ion-input type="email" [ngClass]="{ 'is-invalid':(AddContactForm.submitted && email.invalid && addContactData.phone_type=='Email') || (AddContactForm.submitted && email.length && email.invalid)}" email name="email" [required]="addContactData.phone_type=='Email'" [(ngModel)]="addContactData.email" value="" class="nui-text-field__input"
#email="ngModel"></ion-input>
</ion-item>
<span class="nui-text-field__sub-label error" *ngIf="(AddContactForm.submitted && email.invalid && addContactData.phone_type=='Email') || (AddContactForm.submitted && email.length && email.invalid)">{{'email_required_validation' | translate}}</span>
I would set up a model and check that.
<ion-input [(ngModel)]="this.thing"></ion-input>
Then check if this.thing is valid :)
Related
Hi I am trying to validate toggle switch in Angular 5. If the user selects off then i want to display error message. But when user clicks on submit button(form submission) I am not able to validate if the toggle is off. In below step I want to validate on submit button.
<form *ngIf="formResetToggle" class="form-horizontal" name="permissionEditorForm" #f="ngForm" novalidate
(ngSubmit)="f.form.valid ? savePermission(selectedUserRole.value,selectedScopeName.value) :
(!userrole.valid && !scopename.valid && showErrorAlert('Please enter mandatory fields'));">
<div class="form-group has-feedback">
<label class="control-label col-md-2"for="allowdeny">Allow/Deny</label>
<div class="col-md-10">
<ui-switch checked size="small" [(ngModel)]="permissionEdit.isallowed" name="isallowed" id="isallowed"></ui-switch>
<span *ngIf="IsAllowed" class="errorMessage">
Is Allowed should be true!
</span>
</div>
</div>
</form>
In the above code, If I do something
(ngSubmit)="f.form.valid ? savePermission(selectedUserRole.value,selectedScopeName.value) :
(!userrole.valid && !scopename.valid && !isallowed.valid && showErrorAlert('Please enter mandatory fields'));"
then I get error in !isallowed.valid. The error message says cannot read property of undefined valid. can someone help me to make above validation works? Any help would be appreciated. Thank you.
I am working on angular 4 project. In which, I used reactive forms and angular validations. All the validation messages are shown on focus out of field. But I want to show validation messages on submit button also.
Html Code:
<form [formGroup] = "addNewCustomerForm" (ngSubmit) = "submitAddNewCustomerForm()">
<div class="form-group">
<label>First Name</label>
<input class="form-control" [class.alert-border]="addNewCustomerForm.controls['first_name'].hasError('required') && addNewCustomerForm.controls['first_name'].touched" placeholder="Ex: James" formControlName="first_name">
</div>
<small *ngIf="addNewCustomerForm.controls['first_name'].hasError('required') && addNewCustomerForm.controls['first_name'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid first name.</small>
<small *ngIf="addNewCustomerForm.controls['first_name'].hasError('pattern') && addNewCustomerForm.controls['first_name'].touched && !addNewCustomerForm.controls['first_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid first name.</small>
<div class="form-group">
<label>Last Name</label>
<input class="form-control" [class.alert-border]="addNewCustomerForm.controls['last_name'].hasError('required') && addNewCustomerForm.controls['last_name'].touched" placeholder="Ex: Lee" formControlName="last_name">
</div>
<small *ngIf="addNewCustomerForm.controls['last_name'].hasError('required') && addNewCustomerForm.controls['last_name'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small>
<small *ngIf="addNewCustomerForm.controls['last_name'].hasError('pattern') && addNewCustomerForm.controls['last_name'].touched && !addNewCustomerForm.controls['last_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small>
<div class="form-group">
<label>Email Address</label>
<input class="form-control" [class.alert-border]="addNewCustomerForm.controls['email_id'].hasError('required') && addNewCustomerForm.controls['email_id'].touched" placeholder="Ex: example#xyz.com" formControlName="email_id" (focusin)="emailExist = false" (focusout)="checkEmailExistance($event)">
</div>
<small *ngIf="addNewCustomerForm.controls['email_id'].hasError('required') && addNewCustomerForm.controls['email_id'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid email.</small>
<small *ngIf="addNewCustomerForm.controls['email_id'].hasError('pattern') && addNewCustomerForm.controls['email_id'].touched && !addNewCustomerForm.controls['email_id'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid email.</small>
<small *ngIf="emailExist" class="alert-error"><i class="material-icons">error</i> This email already exists. Please try with different email.</small>
</form>
ts code:
this.addNewCustomerForm = this.formGroup.group({
first_name : [null, [Validators.required, Validators.pattern(this.regExpression)]],
last_name : [null, [Validators.required, Validators.pattern(this.regExpression)]],
email_id : [null, [Validators.required, Validators.pattern(this.emailPattern)]] });
submitAddNewCustomerForm(){
if(this.addNewCustomerForm.valid)
{
console.log(this.addNewCustomerForm.value);
}
}
Well you have two options,
One :- have a Boolean variable in your submit function and set true in case if form is invalid and use that in your error block's ngIf condition.
Below is an example of the same.
submitAddNewCustomerForm(){
if(this.addNewCustomerForm.invalid)
{
this.showError = true;
}
}
And in html error
<small *ngIf="(showError || (addNewCustomerForm.controls['last_name'].hasError('pattern') && addNewCustomerForm.controls['last_name'].touched)) && !addNewCustomerForm.controls['last_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small>
And Second option is you mark each control dirty by using
this.controlName.markAsDirty()
Or by
this.form.get('controlName').markAsDirty()
You can also achieve this with the form directive as per shown here
For the submitted part, add the template reference to your form along the rest you have:
<form .... #formDir="ngForm">
Then you can just add formDir.submitted to your if statements, for the blur functionality you can just check that the field has been touched. So for your if statement, I would assign the actual form control to a variable, so that we can shorten the code, this is of course not necessary, but for readability I would do that and for example use a variable for first_name after building the form:
this.firstNameCtrl = this.addNewCustomerForm.get('first_name');
Then in your template you can do the following to achieve what you want:
<small *ngIf="firstNameCtrl.hasError('required') &&
(formDir.submitted || firstNameCtrl.touched) ">...</small>
I am trying to create an input where you can write a number with decimals.
I don't know how to make it so that a user cant insert two points characters.
Example
I want to prevent the user from writing 0.123445.5, only with one point: 0.123445
I have tried with ionic input properties like step="0.01" but I can't solve it.
EDIT: (SOLVED)
Instead using number, use type="string" and create a method to check number of points of the number.
Before:
<ion-item">
<ion-label stacked>CRP</ion-label>
<ion-input type="number" step="0.01" [(ngModel)]="CRP" (ngModelChange)="checkRules();"
onkeypress="return event.charCode >= 46 && event.charCode <= 57"> </ion-input>
</ion-item>
Now:
<ion-item">
<ion-label stacked>CRP</ion-label>
<ion-input type="text" [(ngModel)]="CRP" (ngModelChange)="checkCRPkDecimals();"
onkeypress="return event.charCode >= 46 && event.charCode <= 57"> </ion-input>
</ion-item>
checkCRPkDecimals() {
if (isNaN(parseFloat(this.CRP))) return;
let str:Array<string> = this.CRP.split(".");
if (str.length > 2) {
this.CRP = "";
return;
} else {
this.checkRules();
}
}
ion-input type text should only accept alphabets without using the form Builder.
<ion-item class="myitem">
<ion-input type="text" value="" placeholder="Full Name*" [(ngModel)]="fullname" maxlength="25"></ion-input>
</ion-item >
You can do it with html adding the pattern attribute to your input.
Alphabets and blankspace:
pattern="/^[a-zA-Z\s]*$/"
Alphabets no blankspace:
pattern="/^[a-zA-Z]*$/"
Alternate
[pattern]="'^[a-zA-Z \-\']$'"
alternately you can use,
<ion-input class=" " (keypress)="onKeyPress($event)"> </ion-input>
and
onKeyPress(event) {
if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122) || event.keyCode == 32 || event.keyCode == 46) {
return true
}
else {
return false
}
}
it will work for me
I have the following form in an Angular partial:
<form name="submit_entry_form" id="submit_entry_form" ng-submit="submit()" ng-controller="SubmitEntryFormCtrl" novalidate >
<input type="text" name="first_name" ng-model="first_name" placeholder="First Name" required/><br />
<input type="text" name="last_name" ng-model="last_name" placeholder="Last Name" required/><br />
<input type="text" name="email" ng-model="email" placeholder="Email Address" required/><br />
<input type="text" name="confirm_email" ng-model="confirm_email" placeholder="Confirm Email Address" required/><br />
<span ng-show="submit_entry_form.$invalid">Error!</span>
<input type="submit" id="submit" value="Submit" />
</form>
The trouble I'm having is with the span at the bottom that says "Error!". I want this to show ONLY if one of the inputs is both "ng-dirty" and "ng-invalid". As it is above, the error will show until the form is completely valid. The long solution would be to do something like:
<span ng-show="submit_entry_form.first_name.$dirty && submit_entry_form.first_name.$invalid || submit_entry_form.last_name.$dirty && submit_entry_form.last_name.$invalid || submit_entry_form.email.$dirty && submit_entry_form.email.$invalid || submit_entry_form.confirm_email.$dirty && submit_entry_form.confirm_email.$invalid">Error!</span>
Which is UGLY. Any better way to do this?
Method 1: Use a function on $scope set up by your controller.
So with a better understanding of your problem, you wanted to show a message if any field on your form was both $invalid and $dirty...
Add a controller method:
app.controller('MainCtrl', function($scope) {
$scope.anyDirtyAndInvalid = function (form){
for(var prop in form) {
if(form.hasOwnProperty(prop)) {
if(form[prop].$dirty && form[prop].$invalid) {
return true;
}
}
}
return false;
};
});
and in your HTML:
<span ng-show="anyDirtyAndInvalid(submit_entry_form);">Error!</span>
Here is a plunker to demo it
Now all of that said, if someone has entered data in your form, and it's not complete, the form itself is invalid. So I'm not sure this is the best usability. But it should work.
Method 2: Use a Filter! (recommended)
I now recommend a filter for this sort of thing...
The following filter does the same as the above, but it's better practice for Angular, IMO. Also a plunk.
app.filter('anyInvalidDirtyFields', function () {
return function(form) {
for(var prop in form) {
if(form.hasOwnProperty(prop)) {
if(form[prop].$invalid && form[prop].$dirty) {
return true;
}
}
}
return false;
};
});
<span ng-show="submit_entry_form | anyInvalidDirtyFields">Error!</span>