I have a web application writte in Grails 3.3.x. with GSP.
Inside a GPS I have this select:
<g:select id="star" name="star"
from="${[['name': '5 star', 'id': '5'], ['name': '4 stelle', 'id': '4'], ['name': '3 stelle', 'id': '3'], ['name': '2 stelle', 'id': '2'], ['name': '1 stelle', 'id': '1']]}"
value="${currentStarValue}"
optionKey="id" optionValue="name"
multiple="multiple" class=" form-control select2" style="width: 100%;"/>
When I submit the form that include this select, I bind it with a simple obj command:
class SimpleCommand implements Validateable {
String filter
List lFilter = []
List star
long id
}
If I choose from the select multiple values it works fine. My List star variable is correctly populated, but if I choose only one value it is empty.
Reading from the params variable I see that if the values are multiple I got a string array, but if it is a single variable it's just a string that of course does not match a list.
Related
I have a table, however some kind of ag-grid, created by DIV's, not real table element:
<div role="row" row-index="1" >
<div col-id="name">Name 1</div>
<div col-id="age">25</div>
</div>
<div role="row" row-index="2" >
<div col-id="name">Name 1</div>
<div col-id="age">25</div>
</div>
I want to verify, if EACH field with col-id="name" contains the same item. I am testing kind of filtering, so if user filters the Name 1, I want to check each row, if there is only Name 1 and nothing else.
As each field which I need to check has the same col-id, I tried it this way:
cy.get('div[col-id="name"]').contains('Name 1')
or
cy.get('div[col-id="name"]').should('contain','Name 1')
but both cases passes even if some field contains another name, because it finds at least one match.
How to assert that each field with col-id="name" should contain ONLY Name 1 ?
Maybe use .each() to test the elements individually
cy.get('div[col-id="name"]')
.each($el => {
expect($el.text()).to.eq('Name 1')
})
Without .each()
cy.get('div[col-id="name"]')
.should($els => {
const names = [...$els].map(el => el.innerText)
expect(names.every(name => name === 'Name 1').to.eq(true)
})
You can verify the combined text of all elements
cy.get('div[col-id="name"]')
.invoke('text')
.should('eq', 'Name 1'.repeat(2)) // assuming two elements, equals "Name 1Name1"
or, this is better for asynchronous fetching of name
cy.get('div[col-id="name"]')
.should('have.text', 'Name 1'.repeat(2)) // equals "Name 1Name1"
When element count is unknown
cy.get('div[col-id="name"]')
.then($els => {
const count = $els.length
cy.wrap($els).should('have.text', 'Name 1'.repeat(count))
})
In case you don't want to apply assertion and just print out statements stating whether the element was found/not found, you can do like this:
cy.get('div[col-id="name"]').each(($ele, index) => {
if ($ele.text().trim() == 'Name 1') {
cy.log('Item Found at position ' + index)
} else {
cy.log(
'Expected Item Not found at position ' +
index +
'. Instead the item was ' +
$ele.text().trim()
)
}
})
I'm using Yup to validate my Formik form, but I have no idea how to validate a radio input in Yup/Formik.
You validate the radio group. The only validation failure that is possible, is if you don't have a default button selected, and the user doesn't select any of the radio buttons.
Given:
<RadioButtonGroup
id="radioGroup"
label="One of these please"
value={values.radioGroup}
error={errors.radioGroup}
touched={touched.radioGroup}
>
<Field
component={RadioButton}
name="radioGroup"
id="radioOption1"
label="Choose this option"
/>
<Field
component={RadioButton}
name="radioGroup"
id="radioOption2"
label="Or choose this one"
/>
</RadioButtonGroup>
Validation code:
radioGroup: Yup.string().required("A radio option is required")
As used in context:
<Formik
...
validationSchema={Yup.object().shape({
radioGroup: Yup.string().required("A radio option is required"),
...
})}
Copied from this larger validation example:
https://gist.github.com/mrtony/c1ba5f8ec4122d2866b292fc36152d34
your radioInputGroup values:
state = {
gender: [
{
id: 0,
type: "woman",
text: interpreter("ImFemale")
}, {
id: 1,
type: "man",
text: interpreter("ImMale")
}
]
}
and your yup validationSchema:
ValidationSchema = Yup.object().shape({
gender: Yup.boolean().required().oneOf([0 , 1]),
});
note: you should to use gender values in .onOf() function.
if you want to show some msg for error message, use this code for yup validationSchema:
ValidationSchema = Yup.object().shape({
gender: Yup.boolean().required().oneOf([0 , 1], 'Selecting the gender field is required'),
});
Theoretically it shouldn't be different from any other value. You're tracking the radio value (or Formik's tracking it for you) somewhere in your state as a string most likely, and you simply need to apply the rules to the value that you're storing.
If you want to make sure the value matches only the presented radio options, you can use oneOf to accomplish that, but otherwise it's no different than any other scalar value.
I have a v-select (don't forget the return-object or you won't get the ID):
<v-select v-model="selectedEmployee"
:items="employee"
item-text="name"
value="id"
return-object
hide-details
></v-select>
I declare the array in data plus a helper array and a variable:
data: {
employeeList: [],
employee: [],
selectedEmployee: null
},
I get the JSON array with a GET and put it into employeeList and then I wrangle the data to be displayed in the v-select:
for(i = 0; i < app.employeeList.length; i++) {
app.employee.push({name: '', id: ''});
app.employee[i].name = app.employee[i].lastname + ' ' + app.employeeList[i].firstname;
app.employee[i].id = app.employeeList[i].id;
}
The employee.name is shown in the v-select and because of return-object you get the .id along with it. So the content of selectedEmployee is:
{name: 'Jane Doe', id: 0}
If you don't use return-object you only get what is shown in the v-select dropdown menu.
Showed you above how to make a dynamic item list for v-select and how to get a workable value out of it.
Took awhile to piece it together thanks to the bad / inaccessible documentation.
Maybe it's useful for somebody.
I working on Angular 2 reactive forms. I facing an issue in form field validation using Validators.pattern(). As soon as I start typing in the input field will get the exception Cannot read property 'subscribe' of null.
TYPSCRIPT CODE
createForm(){
this.jobForm = this.fb.group({
name: ['', Validators.required, Validators.pattern(/^[a-zA-Z0-9]+$/)],
epType: ['ENDPOINT_TYPE_SBC', Validators.required],
streams : this.fb.array([
this.createStreamControls(),
]),
channels:this.fb.array([
this.createChannelControls(),
])
});
}
In 'name' attribute is validated against the pattern.
HTML CODE
<div class="ui-grid-col-8 ">
<input id="name" formControlName="name" pInputText class="width-60" />
<br>
<small *ngIf="jobForm.controls.name.hasError('required') && jobForm.controls.name.touched" class="text-danger">Required</small>
<small *ngIf="jobForm.controls.name.hasError('pattern') && jobForm.controls.name.touched" class="text-danger">Should be alpha-numeric without space</small>
</div>
Trying to validate input field name.
EXCEPTION Cannot read property 'subscribe' of null
Image showing Exception
When I remove the Validators.pattern() from name attribute it works fine. I am not able to understand why it is failing here because I have used Validators.pattern() in the same form for other attributes and it works fine for them.
Need to pass array of Validators in second argument of form group.
createForm(){
this.jobForm = this.fb.group({
name: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9]+$/)]],
epType: ['ENDPOINT_TYPE_SBC', [Validators.required]],
streams : this.fb.array([
this.createStreamControls(),
]),
channels:this.fb.array([
this.createChannelControls(),
])
});
}
I have an array of objects, which I display using st-table directive.
I filter the table by a value of a certain field in the objects.
The problem is, once a value of a field in these objects has been changed, the filtering is not performed.
I believe the reason for it is that smart-table watches the array's length, but doesn't perform deep comparison to see whether or not the values inside any of the objects changed.
What can I do to solve this?
edit: added code:
angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope', '$timeout',
function ($scope, $timeout) {
$scope.rowCollection = [
{
name: "sth odd",
number: 1
},
{
name: "sth even",
number: 1
}
];
$scope.displayedCollection = [].concat($scope.rowCollection);
function changeNumber(){
$timeout(function(){
$scope.rowCollection[1].number = $scope.rowCollection[1].number === 1 ? 2 : 1;
changeNumber();
}, 1000);
}
changeNumber();
}
]);
http://plnkr.co/edit/IVYy5WrsiEJSRXZCqY9z?p=preview
Notice how when you search e.g number "2", the view isn't updated even though the property of the second item sometimes is "2" and sometimes not.
Found a solution for you, instead of using st-search use a plain ng-model and then filter by the ng-model value. then in the ng-repeat filter by that value
so instead of this
<input st-search="number" placeholder="search for number" class="input-sm form-control" type="search"/>
...
<tr ng-repeat="row in displayedCollection">
<td>{{row.name}}</td>
<td>{{row.number}}</td>
</tr>
do this
<input ng-model="searchMe" placeholder="search for number" class="input-sm form-control" type="search"/>
....
<tr ng-repeat="row in filterd = (displayedCollection | filter: searchMe)">
<td>{{row.name}}</td>
<td>{{row.number}}</td>
</tr>
here's a plunker, enter 2 and see how it redos the filtering each time
To refresh the smart-table you can add or remove items as you know or use a new array.. so just recreate the array.
$scope.rowCollection = [].concat($scope.rowCollection);