How to set min and max value for text box and how to test min value not greater then max value?
<input type="number" placeholder="User Id" required min="1" max="100" [(ngModel)]="userId" name="userId" #pickedId="ngModel">
<div *ngIf="!pickedId.valid && pickedId.touched && !newUserForm.form.valid">
User id is required!
</div>
Related
Is there a way to populate user input fields with default value in thymeleaf?
I understand that th:field replaces the value="" tag, but I need to populate the user inputs with default number so, that if the user does not provide input, number 0 will be passed as the input.
I cannot do this in controller as my input type needs to be number, and my model attribute is String[] arraylist.
<input type="number" id = "a2s" name="a2" class="newMatch" value="0" min="0" max="11" th:field="*{player1score}">
<input type="number" id = "b2s" name="b2" class="newMatch" value="0" min="0" max="11" th:field="*{player2score}" >
Try this way:
<input th:value="*{player1score != '' ? player1score : 0}" //...other attr />
th:field will override value, name and id attributes. To populate the field you will have to use the tags separately, like so:
<input type="number" id = "a2s" name="a2" class="newMatch" value="0" min="0" max="11" th:name="*{player1score}" th:id="*${playerscore}">
Solved this by using name and id html fields to replace the need for th:field="*{myVar}" . Like so:
<input type="number" class="newMatch" value="0" min="0" max="25" name="player1score" id="player1score" >
<input type="number" class="newMatch" value="0" min="0" max="25" name="player2score" id="player2score" >
The th:field tag replaces name , id and value fields. So one way to do this is to just use html tags instead.
I have a few "user settings" that I want to be based on a query I do on start-up. For instance, all my setting fields are checkbox inputs and I'll set them to yes or no based on the preference they chose previously that we have stored in the database.
My query from the client looks as follows:
Meteor.call('getNotificationPreferences', function(err, result) {
console.log(result);
Session.set('aNotificationPreference', result.a);
Session.set('bNotificationPreference', result.b);
Session.set('cNotificationPreference', result.c);
Session.set('dNotificationPreference', result.d);
});
This call simply pulls that information from MongoDB and sets the session variable correctly, but then I want to use that session variable to set the checkbox field "checked" attribute. I've tried to set this directly with jQuery and also reactively with Meteor. Sometimes this works and sometimes it doesn't.
The HTML looks something like this (using jquery mobile):
<template name="preferences">
<div data-role="collapsible" data-collapsed="false" data-collapsed-icon="mail" data-expanded-icon="edit">
<h2>Notifications</h2>
<div class="ui-field-contain">
<label for="aNotificationSwitch">A</label>
<input type="checkbox" data-role="flipswitch" data-theme="b" name="aNotificationSwitch" id="aNotificationSwitch" data-mini="true" checked={{aNotification}}>
</div>
<div class="ui-field-contain">
<label for="bNotificationSwitch">B</label>
<input type="checkbox" data-role="flipswitch" data-theme="b" name="bNotificationSwitch" id="bNotificationSwitch" data-mini="true" checked="{{bNotification}}">
</div>
<div class="ui-field-contain">
<label for="cNotificationSwitch">C</label>
<input type="checkbox" data-role="flipswitch" data-theme="b" name="cNotificationSwitch" id="cNotificationSwitch" data-mini="true" checked="{{cNotification}}">
</div>
<div class="ui-field-contain">
<label for="dNotificationSwitch">D</label>
<input type="checkbox" data-role="flipswitch" data-theme="b" name="dNotificationSwitch" id="dNotificationSwitch" data-mini="true" checked="{{dNotification}}">
</div>
</div>
</template>
Then in my JavaScript, I have the following:
Template.preferences.aNotification = function() {
// Setting directly doesn't work either
//$('#aNotificationSwitch').prop('checked', Session.get("aNotificationPreference"));
return Session.get("aNotificationPreference");
};
Can anyone explain why this wouldn't work consistently?
I've also tried doing this the Meteor way, by publishing the preferences as follows:
Meteor.publish("user-preferences", function () {
return Meteor.users.find({_id: this.userId},
{fields: {'notification': 1}});
});
The checked property of an HTML checkbox should not be set to either "true" or "false" as you're trying to do in your code, but respectively to "checked" and nothing.
<input type="checkbox" checked>
is the same as
<input type="checkbox" checked="checked">
These two examples will set the checkbox in the active (checked) state, although the first example is preferable because it's more concise.
An unchecked checkbox is achieved by not specifying the attribute at all :
<input type="checkbox">
So as far as Meteor is concerned, change your helper to :
Template.preferences.aNotification = function() {
return Session.get("aNotificationPreference")?"checked":"";
};
And in the HTML, just do :
<input type="checkbox" {{aNotification}}>
From a design perspective, I wouldn't store the user settings in Session variables fetched from the server via a method call, it doesn't sound very meteorish.
Have you considered storing these settings as properties in the Meteor.user() object ? This would involve setting these properties via a method call, and then publishing the properties explicitly to the client.
Server publication :
Meteor.publish("userSettings",function(){
if(!this.userId){
this.ready();
return;
}
return Meteor.users.find(this.userId,{
fields:{
"profile.settings":1
}
});
});
Client :
// this should be put in a iron:router RouteController waitOn !
Meteor.subscribe("userSettings");
Template.preferences.helpers({
aNotification:function(){
if(!Meteor.userId()){
return "";
}
// this will fail if the publication is not yet ready
// either guard accessing sub properties (this is bad)
// or use iron:router to wait on the subscription (this is good)
return Meteor.user().profile.settings.a?"checked":"";
}
});
I have a ViewModel with rows repeated by using a EditorTemplate
#Html.EditorFor(x => x.Rows)
The HTML generated looks like this (only 1 field in this sample)
<input id="Rows_0__Comment" name="Rows[0].Comment" type="text" value="a" />
<input id="Rows_1__Comment" name="Rows[1].Comment" type="text" value="b" />
<input id="Rows_2__Comment" name="Rows[2].Comment" type="text" value="c" />
This is all fine. But I have a server round trip where some logic removes X rows.
model.Rows = model.Rows.Where(x => x.WhatEver()).ToList();
Now the index based ID strategy used in the HTML render doesn't align with what is posted. So values can be posted to the wrong row.
Can I customize the ID generator to use a ID from my model?
Folks,
I am using watir-webdriver, I have a piece in my HTML DOM which gets generated on the fly when I enter some credentials, this piece has a bunch of checkboxes, the number of checkboxes vary, I have to select one checkbox, below is an example of this, here I want to select the second checkbox(the one that has value "BS" for the input type hidden but the value for input type checkbox is same for all):
<li class="dir">
<input type="checkbox" value="1" onclick="$(this).next('.should_destroy').value = (this.checked?0:1)" name="should_not_destroy">
<input class="should_destroy" type="hidden" value="1" name="import[dir_attributes][][should_destroy]">
<input type="hidden" value="" name="import[dir_attributes][][id]">
<input type="hidden" value="Automation" name="import[dir_attributes][][path]">
<span class="dir_mode">Include</span>
Automation
</li>
<li class="dir">
<input type="checkbox" value="1" onclick="$(this).next('.should_destroy').value = (this.checked?0:1)" name="should_not_destroy">
<input class="should_destroy" type="hidden" value="1" name="import[dir_attributes][][should_destroy]">
<input type="hidden" value="" name="import[dir_attributes][][id]">
<input type="hidden" value="BS" name="import[dir_attributes][][path]">
<span class="dir_mode">Include</span>
BS
</li>
I may be able to do this with XPATH, but wanted to try a non XPATH solution. The input type hidden has the appropriate value that I need, for example above the second checkbox has value "BS" for input type hidden. I tried to use the hidden method like this:
h = ##browser.hidden(:value, "BS")
h.select
But I dont know what to do after this. I am trying to select the checkbox based on the value of the hidden element. Any feedback is much appreciated.
I would suggest using the visible elements instead. I think it makes it easier to read the test and seems more stable.
Try:
##browser.li(:class => 'dir', :text => /BS/).checkbox.set
Here we go, I think this will do it
Since you have to select the checkbox based on the hidden, you're going to have to go up a level to the containing li, then drill down to the checkbox
#browser.hidden(value: 'BS').parent.checkboxes.first.set
first post to this forum ...
The Grails 2.0.1 < field type="number" > doesn't seem to be working out of the box, but perhaps my usage is incorrect, so I'm looking here for a sanity check.
Here's the field in my domain entity:
Long locationId
static constraints = {
locationId(blank: false)
}
Here's the resulting field in the scaffolded-template generated _form.gsp:
<g:field type="number" name="locationId" required="" value="${fieldValue(bean: myEntityInstance, field: 'locationId')}"/>
But here's the result in the html, as per "view source":
<input type="number" name="locationId" required="" value="" id="locationId" />
And my problem is that the form blanks out the existing value of that field, as per: value="".
The other fields (all strings) are populated correctly.
Is the Grails 2.0.1 "number" gsp field working correctly for other people?
Regards
Rob
Try:
<g:field type="number" name="locationId" required="" value="${myEntityInstance.locationId}"/>
If you have any value of 4 or more figures like 1000, fieldValue tries to display it 1,000
Check the actual value of ${fieldValue(bean: myEntityInstance, field: 'locationId')}
Print it out
<%
System.out.println fieldValue(bean: myEntityInstance, field: 'locationId')
%>
i've not had a problem with the 'number' type, it works for me exactly as you have used it