In my angular 4 project I have multiple forms, some of these forms have an input field that needs to be controlled, and if the value isn't correct the button save needs to be disabled.
If i want a input field with only positive numbers I use this:
<input type="number" class="form-control" id="blockFrom" required
[(ngModel)]="blockFrom" min="0" name="blockFrom">
<button (click)="save()" [disabled]="modelForm.form.invalid ||
modelForm.form.pristine">save</button>
But if I write in the input field negative numbers the button is enabled (I see the input field red correctly because the value isn't permitted)
Why?
How can I block the button if value is negative?
You can put a function directly here: [disabled]="checkIfValid()".
The function will then checks your form data.
it should look like this:
checkIfValid():boolean
{
return blockForm>0
}
Related
I have already checked this: How do you programmatically clear HTML5 date fields?
In my case, my form is pre-filled by existing value, and I want user change the date by null in database via the form updatting.
Here are what I tried:
$('input[name=theDate]').val(''); //does not work.
$('input[name=theDate]').removeAttr('value'); //does not work too
In the first case I get jj/mm/aaaa in the input but in dom I always have the existing value for this input
<input type="date" name="theDate" value="2022-04-03">
In the second case, I get jj/mm/aaaa and attribute value does not exist anymore, but the server is getting the existing value like the attribute exists but is just hide.
<input type="date" name="theDate">
How to deal with this?
Have you tried the "id" attribute?
<input type="date" name="theDate" id="theDate" value="2022-04-03">
$("#theDate").val("");
I am implementing a web app using MEAN Stack and Angular 6. There I have an input field which takes color values from ngx-colorpicker. But these input fields allow me to take text inputs as well. If I use <input type= 'color'> then it opens a separate color picker and if I select a color it applies only to the middle part of the text field. What I want is to prevent entering text or numbers in these input fields. Does anyone has an idea to do it?
This is my input field.
<input type="text" nbInput [(colorPicker)]="colorRangeTraceArc" [cpPosition]="'right'" [cpOutputFormat]="'rgba'[style.background]="colorRangeTraceArc"
formControlName="colorRTC" name="colorRangeTraceArc" style="width: 100px" (colorPickerChange)="onChangeColorRTA($event)" />
try to use keydown event on textbox to block any input in the textbox.
Here is the HTML code :
(keydown)="keyDown($event)"
Here is the TS code :
keyDown(event:any){
return false;
}
Please check first textbox in the stackbliz example.
<input type = 'submit' value = '1'>
^---Instead of the input type displaying '1', I would like for it to display 'first page'. Is that possible?
With <input type="submit"> or <input type="button">, it's not possible to separate the value that's sent from the label on the button. If you want to do that, you need to use <button>.
<button type="submit" value="1">First Page</button>
Use of the button tag for this purpose is a new information for me and thanks for sharing that.
Depending on your requirement you can use a hidden filed to hold your value which gets submitted when the form is submitted.
if you want to use it with JS then you can use another attribute to hold the value such as "title" or a custom one, eg:cusval
If your intention is to see if the particular submit button was click at the server side then you can check if the variable is available in the post data.
PHP eg: if( isset($_POST['submitbtn']) )
Just value="First Page". value will display whatever you want. It may be string or int.
I read about value attributes documentation here. It does not clearly mention why is it required for the input tag.
According to the documentation
"value attribute specifies the value of an element" what exactly does it mean by "value"?
Is it a just for humans to know what exactly a checkbox is for?
Or does the value has anything to do with the backend database?
Is the value attribute just for front end purpose only?
I know this question has been asked previously, but not all aspects of what a "value attribute" is were discussed. So I would like to raise the question again, and have another discussion about it.
Is it a just for humans to know what exactly a checkbox is for?Does value attribute is just for frontend purpose only?
The value property sets or returns the value of the value attribute of a checkbox/radiobutton.
For checkboxes and radiobuttons, the contents of the value property do not appear in
the user interface. The value property only has meaning when
submitting a form. If a checkbox/radiobuttons is in checked state when the form is
submitted, the name of the checkbox/radiobuttons is sent with along with the value
of the value property (if the checkbox/radiobuttons is not checked, no information
is sent).
For example, when you are using <input type="button" name="foo" value="Click"/>, this will assign name 'Click' to your button. Same goes for text field: <input name="subject" type="text" value="Default text" /> will show you a text field with 'Defaul text' in it.
Value is where the actual value of the field is stored. Try changing it with jQuery or even with firebug and you will see that the submitted value will be changed!
Given <input type="checkbox" name="foo" value="bar"> the submitted data for the checkbox will be foo=bar if the form it is inside is submitted and the checkbox is successful (the main additional criteria for which is that it is checked). The server side form handler can then use that information.
The value is not exposed to the user of the browser (unless they use a developer tool of some kind). That is the job of the <label> element.
I want to reset the value of a web page using JavaScript reset() function. Which operation is the JavaScript performing first: the reset or a clear? And what is the difference in between the two?
Also, how can I retrieve a value using reset function?
Clear vs. Reset
Clearing a form makes all input fields blank, unchecks checkboxes, deselects multi-select choices, and so forth; whereas, resetting a form reverts all changes.
For example:
<input type="text" name="name" value="Timothy" />
<input type="reset" value="Reset" />
This produces an input field with a value of Timothy. Let's say the user then changes the value to Berners-Lee. If the user clicks the Reset button, the value of Berners-Lee will revert (reset) to Timothy.
Clearing the fields would involve changing the value attribute of the input field to the empty string, as follows:
<input type="text" name="name" value="" />
You can change the value attribute using JavaScript.
Retrieve Value
If you want to get (or set) the value for a field, using JavaScript, try reading these:
http://www.irt.org/script/162.htm
http://www.javascript-coder.com/javascript-form/javascript-get-form.htm
http://www.quirksmode.org/js/forms.html
The reset function does the same as if you had an input type="reset" in the form and clicked it.
It will reset the values in all fields in the form to the value they had when the page loaded.
If you have a textbox like this:
<input type="text" name="info" value="Hejsan" />
calling the reset function will put the value "Hejsan" back in the textbox.
If you haven't specified a value (or not selected an option in a select field), it's reset to an empty value (or for a select field the first option).
The reset function can't be used to retrieve any values.
Edit: I modified my original answer to this thanks to Dave's comment. It looks like he also posted an answer while I modified my answer so he deserves the "accepted" answer.
Resetting a form resets the original values of all fields in a form. If there was no value it will clear the field, if there was a value it will "reset" the field back to that value.
When you clear a form, you would essentially by removing ALL values from the form. There is no "clear form" function in JavaScript, so you would have to go through each field and clear them manually.
So to answer your question, you just want to "reset" the form using the reset() function, not clear the form.