Working on reactive form group which contain 2 fields such as min and max, data is coming form hard-coded array data . when we enter the value on respective field just want to show validation that min value should be greater than max
Hope this will help you
create a form as bellow
createForm() {
this.personalDataForm = new FormGroup({
fieldOne: new FormControl("", [Validators.minLength(5), Validators.maxLength(15)])
// ...
});
}
add validations to your template
<form [formGroup]="personalDataForm">
<ion-row>
<label class="lbl-lnu">fieldOne :</label>
<input type="text" class="input-lnu" formControlName="fieldOne">
<div class="form-control-feedback" *ngIf="personalDataForm.controls.fieldOne.errors && (personalDataForm.controls.fieldOne.dirty || personalDataForm.controls.fieldOne.touched)">
<p class="error-msg" *ngIf="personalDataForm.controls.fieldOne.errors.minlength">Minimum length is 5</p>
<p class="error-msg" *ngIf="personalDataForm.controls.fieldOne.errors.maxlength">Maximun length is 15</p>
</div>
</div>
</ion-row>
</form>
to fire validation when submit, use bellow function
function isValid(): boolean {
const valid = this.personalDataForm.valid
if (!valid) { // if not valid fire validation
Object.keys(this.personalDataForm.controls).forEach(field => {
const control = this.personalDataForm.get(field);
control.markAsTouched({ onlySelf: true });
});
}
return valid; // if form data valid return true, otherwise false
}
Related
I want to make a logic before submitting which states that input value shouldn't be any empty value and it should be greater than 0.
<Form className = "workout-form">
<div className ="form-row">
<label className ="form__label" value>Duration</label>
<input type = 'number' value = {duration} min = '0' onChange = {(e) => setDuration(e.target.value)} class = 'duration' placeholder="min" required/>
</div>
<button className ="form-btn" onClick = {submitWorkout}>Add Workout</button>
</Form>
A way to do it is to create a form validation function that will be called when we want to submit the form, and when the form is correctly completed, you then call the function to submit the form informations.
An example of the form control function
function formValidation(){
duration = document.getElementById('durationField').value;
if(duration > 0 && duration != ""){
//call the submit function
//submitWorkout()
}
}
//function to submit the form
function submitWorkout(){
//content of the function
}
For this to work you have to add the id property to your input field and set it to durationField as follow:
<input type = 'number' id='durationField' value = {duration} min = '0' onChange = {(e) => setDuration(e.target.value)} class = 'duration' placeholder="min" required/>
I want to get the name of the user to put it on an h1.
What dies this line stand for?
#select="option => selected = option">
I'm using Buefy for the vue components.
<template>
<section>
<div class="field">
<b-switch v-model="keepFirst">
Keep-first <small>(will always have first option pre-selected)</small>
</b-switch>
</div>
<p class="content"><b>Selected:</b> {{ selected }}</p>
<b-field label="Find a name">
<b-autocomplete
v-model="name"
placeholder="e.g. Anne"
:keep-first="keepFirst"
:data="filteredDataObj"
field="user.first_name"
#select="option => selected = option">
</b-autocomplete>
</b-field>
</section>
</template>
<script>
import data from '#/assets/data_test.json'
// Data example
// [{"id":1,"user":{"first_name":"Jesse","last_name":"Simmons"},"date":"2016-10-15 13:43:27","gender":"Male"},
// {"id":2,"user":{"first_name":"John","last_name":"Jacobs"},"date":"2016-12-15 06:00:53","gender":"Male"},
// {"id":3,"user":{"first_name":"Tina","last_name":"Gilbert"},"date":"2016-04-26 06:26:28","gender":"Female"},
// {"id":4,"user":{"first_name":"Clarence","last_name":"Flores"},"date":"2016-04-10 10:28:46","gender":"Male"},
// {"id":5,"user":{"first_name":"Anne","last_name":"Lee"},"date":"2016-12-06 14:38:38","gender":"Female"}]
export default {
data() {
return {
data,
keepFirst: false,
name: '',
selected: null
}
},
computed: {
filteredDataObj() {
return this.data.filter((option) => {
return option.user.first_name
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
})
}
}
}
</script>
# is shorthand for v-on:, so it's handling a select event with a function that receives option as a parameter and assigns it to selected.
Since v-model is bound to name, you should be able to do <h1>{{name}}</h1> to have the same value show up in an H1.
The data section has the main variables for your object. name is there. There is also a computed (named filteredDataObj) that should return an array (length of zero or one) with the matching test data. If you want other fields (like id) you would need to look there. Something like
{{filteredDataObj.length ? filteredDataObj.id : ''}}
would give the id if name matched anything in the data set.
For an app I am working on, I've got the following Razor code for a View I am working on:
#Html.InputFor(m => m.Property1); // A date
#Html.InputFor(m => m.Property2); // Some other date
#Html.InputFor(m => m.SomeOtherProperty); // Something else.
<a href='#' id='some-button'>Button Text Here</a>
<!-- SNIP: Extra code that dosen't matter -->
<script>
var $someButton = $('#some-button');
$(document).ready(function () {
$someButton.click(function (e) {
e.preventDefault();
window.open('#Url.Action("Foo", "Home", new {p1 = Model.Property1, p2 = Model.Property2, pX = Model.SomeOtherProperty})', '_blank');
});
});
</script>
...upon a comment, I checked the rendered HTML. The values come with values, as expected...
<input name="Property1" data-val="true" data-val-required="(Required)" type="text" value="1/1/2013">
<input name="Property2" data-val="true" data-val-required="(Required)" type="text" value="4/11/2013">
<input name="SomeOtherProperty" data-val="true" data-val-required="(Required)" type="text" value="42">
<a href='#' id='some-button'>Button Text Here</a>
<script>
var $someButton = $('#some-button');
$(document).ready(function () {
$someButton.click(function (e) {
e.preventDefault();
window.open('http://localhost:xxxx/Home/Foo?p1=1%2F1%2F2013&p2=4%2F11%2F2013&pX=42', '_blank');
});
});
</script>
...and on the server side...
public ActionResult Foo(string p1, string p2, string pX)
{
var workModel = new FooWorkModel
{
Property1 = p1,
Property2 = p2,
SomeOtherProperty = pX
};
// Do something with this model, dosen't really matter from here, though.
return new FileContentResult(results, "application/some-mime-type");
}
I've noticed that only the first parameter (p1) is getting a value from the front end; all my other parameters are being passed null values!
Question: Why is the ActionResult being passed null values, when some value is assigned for these other fields? Or, a complimentary question: why would only the first parameter be successfully passing its value, while everything else is failing?
The issue is being caused by the escaped URL being generated by Url.Action(). (Source: How do I pass correct Url.Action to a JQuery method without extra ampersand trouble?)
Simply add a #Html.Raw() call around the Url.Action(), and data will flow as intended.
window.open('#Html.Raw(Url.Action("Foo", "Home", new {p1 = Model.Property1, p2 = Model.Property2, pX = Model.SomeOtherProperty}))', '_blank');
I have an angular app that contains a save button taken from the examples:
<button ng-click="save" ng-disabled="form.$invalid">SAVE</button>
This works great for client side validation because form.$invalid becomes false as user fixes problems, but I have an email field which is set invalid if another user is registered with same email.
As soon as I set my email field invalid, I cannot submit the form, and the user has no way to fix that validation error. So now I can no longer use form.$invalid to disable my submit button.
There must be a better way
This is another case where a custom directive is your friend. You'll want to create a directive and inject $http or $resource into it to make a call back to the server while you're validating.
Some pseudo code for the custom directive:
app.directive('uniqueEmail', function($http) {
var toId;
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
//when the scope changes, check the email.
scope.$watch(attr.ngModel, function(value) {
// if there was a previous attempt, stop it.
if(toId) clearTimeout(toId);
// start a new attempt with a delay to keep it from
// getting too "chatty".
toId = setTimeout(function(){
// call to some API that returns { isValid: true } or { isValid: false }
$http.get('/Is/My/EmailValid?email=' + value).success(function(data) {
//set the validity of the field
ctrl.$setValidity('uniqueEmail', data.isValid);
});
}, 200);
})
}
}
});
And here's how you'd use it in the mark up:
<input type="email" ng-model="userEmail" name="userEmail" required unique-email/>
<span ng-show="myFormName.userEmail.$error.uniqueEmail">Email is not unique.</span>
EDIT: a small explanation of what's happening above.
When you update the value in the input, it updates the $scope.userEmail
The directive has a $watch on $scope.userEmail it set up in it's linking function.
When the $watch is triggered it makes a call to the server via $http ajax call, passing the email
The server would check the email address and return a simple response like '{ isValid: true }
that response is used to $setValidity of the control.
There is a in the markup with ng-show set to only show when the uniqueEmail validity state is false.
... to the user that means:
Type the email.
slight pause.
"Email is not unique" message displays "real time" if the email isn't unique.
EDIT2: This is also allow you to use form.$invalid to disable your submit button.
I needed this in a few projects so I created a directive. Finally took a moment to put it up on GitHub for anyone who wants a drop-in solution.
https://github.com/webadvanced/ng-remote-validate
Features:
Drop in solution for Ajax validation of any text or password input
Works with Angulars build in validation and cab be accessed at formName.inputName.$error.ngRemoteValidate
Throttles server requests (default 400ms) and can be set with ng-remote-throttle="550"
Allows HTTP method definition (default POST) with ng-remote-method="GET"
Example usage for a change password form that requires the user to enter their current password as well as the new password.:
<h3>Change password</h3>
<form name="changePasswordForm">
<label for="currentPassword">Current</label>
<input type="password"
name="currentPassword"
placeholder="Current password"
ng-model="password.current"
ng-remote-validate="/customer/validpassword"
required>
<span ng-show="changePasswordForm.currentPassword.$error.required && changePasswordForm.confirmPassword.$dirty">
Required
</span>
<span ng-show="changePasswordForm.currentPassword.$error.ngRemoteValidate">
Incorrect current password. Please enter your current account password.
</span>
<label for="newPassword">New</label>
<input type="password"
name="newPassword"
placeholder="New password"
ng-model="password.new"
required>
<label for="confirmPassword">Confirm</label>
<input ng-disabled=""
type="password"
name="confirmPassword"
placeholder="Confirm password"
ng-model="password.confirm"
ng-match="password.new"
required>
<span ng-show="changePasswordForm.confirmPassword.$error.match">
New and confirm do not match
</span>
<div>
<button type="submit"
ng-disabled="changePasswordForm.$invalid"
ng-click="changePassword(password.new, changePasswordForm);reset();">
Change password
</button>
</div>
</form>
I have created plunker with solution that works perfect for me. It uses custom directive but on entire form and not on single field.
http://plnkr.co/edit/HnF90JOYaz47r8zaH5JY
I wouldn't recommend disabling submit button for server validation.
Ok. In case if someone needs working version, it is here:
From doc:
$apply() is used to enter Angular execution context from JavaScript
(Keep in mind that in most places (controllers, services)
$apply has already been called for you by the directive which is handling the event.)
This made me think that we do not need: $scope.$apply(function(s) { otherwise it will complain about $digest
app.directive('uniqueName', function($http) {
var toId;
return {
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
//when the scope changes, check the name.
scope.$watch(attr.ngModel, function(value) {
// if there was a previous attempt, stop it.
if(toId) clearTimeout(toId);
// start a new attempt with a delay to keep it from
// getting too "chatty".
toId = setTimeout(function(){
// call to some API that returns { isValid: true } or { isValid: false }
$http.get('/rest/isUerExist/' + value).success(function(data) {
//set the validity of the field
if (data == "true") {
ctrl.$setValidity('uniqueName', false);
} else if (data == "false") {
ctrl.$setValidity('uniqueName', true);
}
}).error(function(data, status, headers, config) {
console.log("something wrong")
});
}, 200);
})
}
}
});
HTML:
<div ng-controller="UniqueFormController">
<form name="uniqueNameForm" novalidate ng-submit="submitForm()">
<label name="name"></label>
<input type="text" ng-model="name" name="name" unique-name> <!-- 'unique-name' because of the name-convention -->
<span ng-show="uniqueNameForm.name.$error.uniqueName">Name is not unique.</span>
<input type="submit">
</form>
</div>
Controller might look like this:
app.controller("UniqueFormController", function($scope) {
$scope.name = "Bob"
})
Thanks to the answers from this page learned about https://github.com/webadvanced/ng-remote-validate
Option directives, which is slightly less than I do not really liked, as each field to write the directive.
Module is the same - a universal solution.
But in the modules I was missing something - check the field for several rules.
Then I just modified the module https://github.com/borodatych/ngRemoteValidate
Apologies for the Russian README, eventually will alter.
I hasten to share suddenly have someone with the same problem.
Yes, and we have gathered here for this...
Load:
<script type="text/javascript" src="../your/path/remoteValidate.js"></script>
Include:
var app = angular.module( 'myApp', [ 'remoteValidate' ] );
HTML
<input type="text" name="login"
ng-model="user.login"
remote-validate="( '/ajax/validation/login', ['not_empty',['min_length',2],['max_length',32],'domain','unique'] )"
required
/>
<br/>
<div class="form-input-valid" ng-show="form.login.$pristine || (form.login.$dirty && rv.login.$valid)">
From 2 to 16 characters (numbers, letters and hyphens)
</div>
<span class="form-input-valid error" ng-show="form.login.$error.remoteValidate">
<span ng:bind="form.login.$message"></span>
</span>
BackEnd [Kohana]
public function action_validation(){
$field = $this->request->param('field');
$value = Arr::get($_POST,'value');
$rules = Arr::get($_POST,'rules',[]);
$aValid[$field] = $value;
$validation = Validation::factory($aValid);
foreach( $rules AS $rule ){
if( in_array($rule,['unique']) ){
/// Clients - Users Models
$validation = $validation->rule($field,$rule,[':field',':value','Clients']);
}
elseif( is_array($rule) ){ /// min_length, max_length
$validation = $validation->rule($field,$rule[0],[':value',$rule[1]]);
}
else{
$validation = $validation->rule($field,$rule);
}
}
$c = false;
try{
$c = $validation->check();
}
catch( Exception $e ){
$err = $e->getMessage();
Response::jEcho($err);
}
if( $c ){
$response = [
'isValid' => TRUE,
'message' => 'GOOD'
];
}
else{
$e = $validation->errors('validation');
$response = [
'isValid' => FALSE,
'message' => $e[$field]
];
}
Response::jEcho($response);
}
I have created a add email method (jquery) to validate a multiple emails for recipient text box. it's working fine when prototype.js is not declared on the page. To get rid of the $ conflict i also incorporated the $ noconflict() method measure measure. The other field validations are working in this scenario, except the receipient email validation field. AS per my finding "jQuery.validator.methods.email.call(this, value, element)" line no 50 of the page is not working and hence the method is not firing . I need to call the prototype.js as well. Please see the following code for a clearer understanding.......Thanks in advance.
Please see the code below:
Multi Email Validation
var JQ = jQuery.noConflict();
JQ(document).ready(function() {
// Handler for .ready() called.
JQ("#email-form").validate({
rules : {
email : {
required : true,
email : true
},
recipientEmail : {
multiemail: true,
required : true
// email : true
}
},
messages: {
email: {
required: "Please enter your email address.",
email: "Please enter a valid email address"
},
recipientEmail: {
multiemail: "One or more of your recipient email addresses needs correction.",
required: "Please enter the recipient's email address."
//email: "Please enter a valid email address"
}
}
});
});
JQ.validator.addMethod("multiemail", function(value, element) {
if (this.optional(element)) // return true on optional element
return true;
// var emails = value.split( new RegExp( "\s*,\s*", "gi" ) );
var emails = value.split( new RegExp( "\s*,\s*", "gi" ) );
valid = true;
maxEmaillength = emails.length;
for(var i in emails)
{
value = emails[i];
valid = valid && jQuery.validator.methods.email.call(this, value, element);
// Maximum email length validation
if(maxEmaillength > 5)
{
JQ('label.error:first').html("Please enter only 5 mail IDs at a time");
JQ('label.error:first').css(display, block);
setTimeout(alert("Please enter only 5 mail IDs at a time"), 5);
}
}
return valid;
}, 'One or more email addresses are invalid');
</head>
<body>
<form action="" method="get" name="email-form" id="email-form">
<label for="email">email</label>
<input type="text" name="email" id="email" style="width:200px" />
<br />
<label for="recipientEmail">Recipient Email</label>
<input type="text" name="recipientEmail" id="recipientEmail" style="width:500px" /><br />
<input type="submit" name="Submit" id="Submit" value="Submit" />
</form>
</body>
</html>
I have just change the approach a little bit, as jQuery.validator.methods.email.call(this, value, element) was not working in the previous custom method. Although i could not find the exact reason, why that was not working with prototype.js and what the exact solution for that problem. But the following code snippet is working as desired. Just replace that previous jquery custom email method with the following one.
function validateEmail(field) {
var regex=/\b[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}\b/i;
return (regex.test(field)) ? true : false;
}
JQ.validator.addMethod("multiemail", function(value, element)
{
var result = value.split(",");
for(var i = 0;i < result.length;i++)
if(!validateEmail(result[i]) || result.length > 5)
return false;
return true;
},'One or more email addresses are invalid');