I want to add class name "max-length" when user enters the characters more than 200 on textarea | Angular 2 format
<textarea class="form-control" id="input" name="input" maxlength="200" placeholder="Placeholder" cols="10" rows="5">Value</textarea>
You can add a change event on input and get the length check following and based on a validation can have a class added:
HTML:
<textarea class="form-control {{dynamicClass}}" (change)="valueChange($event)" id="input" name="input" maxlength="200" placeholder="Placeholder" cols="10" rows="5">Value</textarea>
TS:
define this variable in your class:
dynamicClass: string;
following is your method:
valueChange(event){
if(event.target.value.length > 200){
this.dynamicClass = "max-length";
}
}
Related
I have a form in my vue component.
In that form I have a filed to input document name
<!--Name-->
<div class="mb-5 relative z-30">
<p class="text-certstyle-titles font-bold text-sm mb-1">Name</p>
<validator-v2
identifier="addDocument"
name="add_name_input"
selector="id"
:rules="{ required: { message: 'Name of the document is required.'}}"
></validator-v2>
<input
id="add_name_input"
v-model="documentName"
name="name"
type="text"
class="form-input w-full relative z-10"
/>
</div>
And I have following required validation for name field inside the store method,
if (!this.documentName) {
this.showToastrErrorMessage("Please add document name")
loader.stopLoading();
return
}
But when I try to submit the form without filling name field, it's not shoeing me the error message or the toast...
How to add invalid class to form-group if the validation fails on input. By default VueValidate adds to the input.
<div class="form-group">
<label for="mobile" v-bind:class="{'text-danger': errors.has('mobile')}">Mobile</label>
<input type="text" v-validate="validation.mobile" class="form-control" v-model="user.mobile" name="mobile" id="mobile" />
<span class="invalid-feedback">{{ errors.first('mobile') }}</span>
</div>
Currently i am using v-bind:class="{'text-danger': errors.has('mobile')}" on the label and i get red colored label on field error.
If i could add invalid to form-group, it would be better to control with css. Below is my VueValidate Settings
Vue.use(VeeValidate, {
aria: true,
classes: true,
classNames: {
invalid: 'is-invalid'
}
});
You can bind a computed function to check errors and return the div's classes
{
computed: {
formGroupClass: function () {
if (this.error.has('mobile') ){
return ['form-group', 'invalid']
}
return ['form-group']
}
}
}
<div :class="formGroupClass">
<label for="mobile" v-bind:class="{'text-danger': errors.has('mobile')}">Mobile</label>
<input type="text" v-validate="validation.mobile" class="form-control" v-model="user.mobile" name="mobile" id="mobile" />
<span class="invalid-feedback">{{ errors.first('mobile') }}</span>
</div>
<label class="radio inline check">
<input class="input ng-new ng-valid" name="BookType" required="" type="radio">
<!---->
<!---->
Fiction
</label>
<label class="radio inline check">
<input class="input ng-new ng-valid" name="BookType" required="" type="radio">
<!---->
<!---->
NonFiction
</label>
<label class="radio inline check">
<input class="input ng-new ng-valid" name="BookTypeReal" required="" type="radio">
<!---->
<!---->
Fiction
</label>
<label class="radio inline check">
<input class="input ng-new ng-valid" name="BookTypeReal" required="" type="radio">
<!---->
<!---->
Fantasy
</label>
http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.filter
If I use
element.all(locator).filter(filterFn)
the text returned is empty.
How can I go to parent element <label> to get the text?
label[class="radio inline check"]
returns 60 elements where more than one getText will return same text so it won't be unique.
input[name="BookType"]
returns two elements where each element is unique.
I used the following approach using TypeScript:
import {by, ElementFinder} from 'protractor';
export interface ElementDescriptor {
tag?: string;
cssClass?: string;
}
async function matches(element: ElementFinder, parentDescription: ElementDescriptor): Promise<boolean> {
const promises = [];
if (parentDescription.tag) {
promises.push(element.getTagName());
}
if (parentDescription.cssClass) {
promises.push(element.getAttribute('class'));
}
let i = 0;
const results: string[] = await Promise.all(promises);
return (!parentDescription.tag || results[i++] === parentDescription.tag)
&& (!parentDescription.cssClass || results[i++].split(' ').includes(parentDescription.cssClass));
}
export async function findParent(element: ElementFinder, parentDescription: ElementDescriptor): Promise<ElementFinder> {
let parent: ElementFinder;
do {
parent = element.element(by.xpath('..'));
} while ((await parent.getTagName()) !== 'html' && !(await matches(parent, parentDescription)));
return parent;
}
To click on the <input> tag whose <label> has text as Fiction and <input> tag has name as BookType you can use the following xpath :
"//label[#class='radio inline check' and contains(normalize-space(), 'Fiction')]/input[#class='input ng-new ng-valid' and #name='BookType']"
You have two options to do it:
To get the parent element, as you mentioned. For this you can use xpath's ancestor for it like this:
.//*[#name='BookType']/ancestor::label
To get the text as the sibling of the element with #name='BookType':
.//*[#name='BookType']/following-sibling::text()[normalize-space()]
In Xpath if you want parent of input you can use //input[name="BookType"]/..
i have framed this based on available details over the net. Please give a try.
element.all(by.css('.radio inline check')).filter(function(elem){
return elem.element(by.xpath("//*[text()[contains(.,'Fiction')]]")).getText()
}).then(function(filteredElements){
filteredElements.first().element(by.css('input[name=BookType]')).click();
});
Note: You may have some format issue in this.
I'm using Vue for the first time, with Vue Validator. Here is an example of my code:
<label for="first_name">First name:
<span v-if="$validation1.first_name.required" class="invalid">Enter your first name.</span>
<input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
</label>
The only issue at the moment is that when I land on the page with my form, the whole thing is covered in errors. Is there a way I can suppress the errors and only show them on input blur / form submit?
Argh, the Google-able word isn't about blur, or on submit – its about timing and initial:
http://vuejs.github.io/vue-validator/en/timing.html
<input id="first_name" initial="off" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
you need to add .dirty or .touched to your validation
<label for="first_name">First name:
<span v-if="$validation1.first_name.required && $validation1.first_name.touched" class="invalid">Enter your first name.</span>
<input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
</label>
I was dealing with a similar problem. I had to have an initialized variable for the input name: "" but I also wanted to have a required attribute in element.
So I add required when the event onblur occurs.
<input name="name" type="number" v-model="name" #blur="addRequired" />
const app = Vue.createApp({
data() {
return {
name: ""
}
},
methods:{
addRequired: function(event){
event.target.setAttribute("required", true);
}
}
});
I am using Polymer for a short time and now i want to get the value of a paper input. I don't know how can I do this.
This is not working:
this.form.password
I want to get the Value of this field:
<paper-input label="Password" type="password" id="password" name="password" size="25" value=""></paper-input>
I also want get the Input for submitting of the e-mail input:
<paper-input label="Login" id="email" name="email" size="25" value=""></paper-input>
For submitting I am using:
<paper-button raised value="Login" type="submit" onclick="formhash(this.form, this.form.password);">Login</paper-button>
With normal input fields is this working.
You can use document.querySelector('#password').value to get the value of paper-input with id password in the formhash() function call or inside the function definition.
You can also use polymer's Automatic node finding to get value of an element using its id. In which keep the form/input in custom-element and use this.$.password.value to get the value of an element with id password. Like this
<!-- create a custom component my-form -->
<dom-module id="my-form">
<template>
<form is="iron-form" id="form" method="post">
<paper-input name="name" label="name" id="name"></paper-input>
<paper-button raised on-click="submitForm">Submit</paper-button>
</form>
</template>
<script type="text/javascript">
Polymer({
is: "my-form",
submitForm: function() {
alert(this.$.name.value);
if(this.$.name.value != "") // whatever input check
this.$.form.submit();
}
})
</script>
</dom-module>
<my-form></my-form> <!-- use custom-component my-form -->
If you don't want to use <form> you can also simply store the paper-input values in instance variables and use them later wherever you want.
All you have to do is store the input inside a value like this:
<paper-input label="Password" type="password" id="password" name="password" size="25" value="{{valueNameToStore}}"></paper-input>
And later access it like this:
var myPassword = this.valueNameToStore;
Using <form is="iron-form"> allows you to use <paper-input> and other input elements in forms https://elements.polymer-project.org/elements/iron-form
<form is="iron-form" id="form" method="post" action="/form/handler">
<paper-input name="name" label="name"></paper-input>
<input name="address">
...
<paper-button raised onclick="submitForm()">Submit</paper-button>
</form>
function submitForm() {
document.getElementById('form').submit();
}
or, sometimes you can try this.$.password.value to get the value for password.