<input
#valueRef
tabindex="1"
type="number"
step="1"
name="value"
id="value"
placeholder="Enter value"
class="form-control"
formControlName="value"
[ngClass]="{ 'is-invalid': submitted && adjForm.controls['value'].errors && !this.data.isAdjAccount }"
/>
I set input step as 1, but it still supports to input decimal, what I want to show is: when you open this from, and enter value in this input box, it forbids user to enter decimals, only integer is valid.
Try this
<input type="text" class="form-control" placeholder="Enter value" id="txtvalueRef" name="valueRef" #valueRef="ngModel" pattern="[0-9]*">
<div [hidden]="valueRef.valid || valueRef.pristine" class="alert alert-danger">
<div [hidden]="!valueRef.hasError('pattern')">Items should be only numbers</div>
</div>
Related
<template>
<p>FrontEnd Items</p>
<label for="vue">Vue.js</label>
<input type="checkbox" name="vue" id="vue" v-model="frontendItems">
<label for="React">React.js</label>
<input type="checkbox" name="React" id="React" v-model="frontendItems">
<label for="Angular">Angular.js</label>
<input type="checkbox" name="Angular" id="Angular" v-model="frontendItems">
<p>
You have selected :- {{ frontendItems }}
</p>
<p>For radio Buttons</p>
<p>Who am I</p>
<label for="developer">Developer</label>
<input type="radio" name="developer" id="developer" v-model="whoAmI">
<label for="programmer">Programmer</label>
<input type="radio" name="programmer" id="programmer" v-model="whoAmI">
<p>
I am :- {{ whoAmI }}
</p>
</template>
<script>
export default {
name : 'CheckRadiobinding',
data(){
return {
frontendItems:[],
whoAmI : null
}
}
}
</script>
In frontend items i want to get stored array values 'vue', 'react' and 'angular' and in whoAmI varaiable i want to get either developer or programmer whenever i click check and radio button but I am only getting 'on' as a value
You're missing value on each of your inputs. When a checkbox or radio input is selected value is what gets added to your v-model array
<template>
<p>FrontEnd Items</p>
<label for="vue">Vue.js</label>
<input
id="vue"
v-model="frontendItems"
value="Vue.js"
type="checkbox"
name="vue"
/>
<label for="React">React.js</label>
<input
id="React"
v-model="frontendItems"
value="React.js"
type="checkbox"
name="React"
/>
<label for="Angular">Angular.js</label>
<input
id="Angular"
v-model="frontendItems"
value="Angular.js"
type="checkbox"
name="Angular"
/>
<p>You have selected :- {{ frontendItems }}</p>
<p>For radio Buttons</p>
<p>Who am I</p>
<label for="developer">Developer</label>
<input
id="developer"
v-model="whoAmI"
value="Developer"
type="radio"
name="developer"
/>
<label for="programmer">Programmer</label>
<input
id="programmer"
v-model="whoAmI"
value="Programmer"
type="radio"
name="programmer"
/>
<p>I am :- {{ whoAmI }}</p>
</template>
I'm playing around with htmx and hyperscript, and I want all input fields in the form below to be cleared on submit:
<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend"
_="<what should I write here??>">
<label class="control-label" for="firstNameInput">First Name</label>
<input id="firstNameInput" name="firstName" class="form-control" type="text" required placeholder="John"/>
<label class="control-label" for="lastNameInput">Last Name</label>
<input id="lastNameInput" name="lastName" class="form-control" type="text" required placeholder="Doe"/>
<button class="btn btn-primary">Add User</button>
</div>
</form>
I've tried replacing <what should I write here??> with e.g. on submit put '' into <input/> and on submit put '' into <input[value]/> and lots of other combinations but I fail to get this work.
Q: How can I clear all input fields when the form is submitted?
Try with on htmx:afterRequest reset() me
I am working with ejs and mongodb/mongoose and what I am trying to do is rendering the page passing the data to an input type="number" on value attribute, but it is not working.
This is the backend part of the code:
Produto.findOne({_id: requestedProduct}, function(err, produto){
res.render("produtosEditar", {
precoUnitario: produto.precoUnitario
});
});
And this is where I am trying to render it:
<input class="form-control mid-field" type="number" min="0" step="any" name="precoUnitario" value="<%= precoUnitario %> ">
The value stored in db is higher than 0.
When I change the input type to text, it works, but it doesn't when it is a type="number".
This is an edit data page.
Can you help bros?
Thank you!
I'm assuming your precoUnitario variable is a valid number. You need to remove the
extra space at the end of value="<%= precoUnitario %> ">.
You can see the demo below:
<!-- The extra space at the end of value makes it unvalidate -->
<input class="form-control mid-field" type="number" min="0" step="any" name="precoUnitario" value="1.5 ">
<!-- This works -->
<input class="form-control mid-field" type="number" min="0" step="any" name="precoUnitario" value="1.5">
I am using formGroup for form validation in angular2.I am doing a validation for Phone Number.I want the validation message to be displayed only when user leaves the field/tabs out.Right now, the validations are working fine but the validation message appears even when I am focused to the field.
For ex.- If I try to change the phone number and make the digits equal to 10 , it throws error(though I have not tabbed out).I want the error to be displayed only when I tab out. Any idea what am i missing here.
<form [formGroup]="paymentDetailsForm">
<md-input formControlName="officePhone" placeholder="Primary Contact Phone" name="officePhone" [(ngModel)]="paymentform.officePhone" (blur)="registerChaseUser()" (keyup)="numberKeyed($event.target.value)" [restrictKey]="'^[0-9]+$'" noSpace="true" maxlength="14" required></md-input>
<span *ngIf="!paymentDetailsForm.controls['officePhone'].valid && (!paymentDetailsForm.controls['officePhone'].pristine || paymentDetailsForm.controls['officePhone'].touched || showPaymentError) && paymentform.officePhone.length == 0" class="validation validation-fix">This field is required.</span>
<span *ngIf="(paymentform.officePhone.length < 14) && (paymentform.officePhone.length > 0) && (!paymentDetailsForm.controls['officePhone'].pristine || paymentDetailsForm.controls['officePhone'].touched)" class="validation validation-fix">Please enter a full 10-digit phone number.</span>
</form>
Try using blur
<input (blur)="onBlur()" (focus)="onFocus()">
and then activate the message only if onblur was called.
you should try 'ngTouch'
instead of "|| paymentDetailsForm.controls['officePhone'].touched"
should write "&& paymentDetailsForm.controls['officePhone'].touched"
for example :
<form *ngIf="active" id="contactForm" (ngSubmit)="onContactSubmit()" [formGroup]="contactForm">
<div class="row">
<div class="col-sm-6 form-group">
<label for="first-name"> First Name</label>
<input class="form-control" type="text" formControlName="firstName">
<p *ngIf="!contactForm.controls.firstName.valid&&contactForm.controls.firstName.touched" class="alert alert-danger">
firstname is required
</p>
</div>
<div class="col-sm-6 form-group">
<label for="last-name"> Last Name</label>
<input class="form-control" type="text" formControlName="lastName">
<p *ngIf="!contactForm.controls.lastName.valid&&contactForm.controls.lastName.touched" class="alert alert-danger">lastname is required</p>
</div>
</div>
</form>
I tried to find the x-path of a text field username and password, but it keeps on changing dynamically.I won't be able to use starts-with or contains in a findelement using x-path. Here's the HTML DOM-
<div id="contents">
<h1 style="white-space:pre; width:80px; float:left;line-height:35px;">Login</h1>
<span style="float:left; padding-top:13px; COLOR:#990033; font-weight:bold;"> Student | Parent | Faculty</span>
<div class="form-elements">
<div class="form-elements">
<div class="form-elements">
<div class="label-txt">Password</div>
<input id="rcnr2uew1m0rkikeaaniwk" type="password" style="display:none;" name="rcnr2uew1m0rkikeaaniwk"/>
<input id="ko2xs123ebqyoluh15bulu" type="password" style="display:none;" name="ko2xs123ebqyoluh15bulu"/>
<input id="cuouek4bfz41etm4hroj0r" type="password" style="display:none;" name="cuouek4bfz41etm4hroj0r"/>
<input id="u2ta3gv2o2ce0azx5plpuh" type="password" name="u2ta3gv2o2ce0azx5plpuh"/>
<input id="g03nwjuzhqnkuwgsl4q2mu" type="password" style="display:none;" name="g03nwjuzhqnkuwgsl4q2mu"/>
<input id="gddwv4z3amojk0yvoxi2v4" type="password" style="display:none;" name="gddwv4z3amojk0yvoxi2v4"/>
<input id="kxecmkho2vf1vcfb42icjr" type="password" style="display:none;" name="kxecmkho2vf1vcfb42icjr"/>
<span id="ctl04" style="color:Red;visibility:hidden;">*</span>
</div>
I tried to find the input[4] with no style.
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[4]
Next time how it changes-
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[17]
id and name of the input also keeps on changing without any common trait
You can do it by locating sibling of the User name label that is displayed, i.e. without attribute style="display:none;"
User Name
"//div[contains(text(), 'User Name')]/following-sibling::input[not(#style='display:none;')]"
Password
"//div[contains(text(), 'Password')]/following-sibling::input[not(#style='display:none;')]"
Or something similar using type attribute:
//input[#type='password'][not(#style)]