About bean of hasErrors - grails

Assuming i have the following object in my controller
objCollection = [obj1, obj2, obj3]
And in each obj is the following
obj1 = [
input = value, inputA1 = valueA1, inputA2 = valueA2
]
obj2 = [
input = value, inputB2 = valueB2, inputA3 = valueA3
]
obj3 = [
input = value, inputC2 = valueC2, inputA3 = valueA3
]
And my GSP looks something like this
<div class="control-group ${hasErrors(bean: objCollection.obj, field: 'input', 'error')}">
<g:textField name='input' value='${objCollection?.obj}'>
</div>
<div id="subForm" class="subContainer">
<g:each var='obj' in='${objCollection}' status='a'>
<div id='obj${a+1}'>
<div class='subaccordion'>
<div>
<g:each var='objInstance' in='${obj}' status="b">
<g:render template="miniForm" model="[b:b, objInstance:objInstance]"/>
</g:each>
</div>
</div>
</div>
</g:each>
</div>
While for the template miniForm
<div class="control-group ${hasErrors(bean: objInstance, field: 'input', 'error')}">
<g:textField name='input' value='${objInstance?.obj}'>
</div>
<div class="control-group ${hasErrors(bean: objInstance, field: 'input', 'error')}">
<g:textField name='input' value='${objInstance?.obj}'>
</div>
Where the name attribute is changed using jquery to input A1, A2, B1, B2, C1 and C3 upon form load.
Now my question is, did i passed the object properly to the bean on hasErrors? Because i tried to get the hasErrors to work but somehow it didn't work to my expectation.
Did i made any mistake anywhere?
Also did i map the object correctly to every input in GSP? I'm not quite sure on how to use the safe operator '?' to avoid nullPointer error.

Related

how to handle subtraction in thymeleaf

I have registration form, where a user can enter her
name,email,dateofBirth,mobile Number. I want to calculate the users
age. If the user is 21 old he is able to register with us unless he cannot able to register. I have already created custom validation, and I pass the validation in my model class. But I am not able to calculate the age and use the logic for 21 year. I created dynamic form.
SignUp.html
<div class="content-area-container page-ath-wrap" th:object="${advertisement}">
<div class="page-ath-content container-fluid">
<div class="page-ath-form">
<div class="page-ath-heading">
<!-- <h3 th:text="*{reward_amount}">Congrats! You just earned $5 off your next beer.</h3>-->
<h3 th:text="*{form_title}"></h3>
<!-- <p>Enter your info to claim the reward!</p>-->
<p th:text="*{form_description}"></p>
</div>
<div class="singup-form">
<form id="form_signup">
<input id="id" th:field="*{id}" type="hidden"/>
<div th:each="item,iterStat : *{form}" >
<!-- <label th:label="${str.getLabel()}" th:type="${str.getType()}" th:text="${str.value}" ></label>-->
<div class="form-group">
<label th:for="${item.name}" th:text="${item.label}"></label>
<div th:if="${item.validation == 'dob'}" >
<input class="form-control" th:id="${item.name}" th:name="${item.name}" th:placeholder="${item.placeholder}" th:required="${item.required}"
th:type="${item.type}" th:attr="max=${#dates.format(#dates.createNow(), 'MM-dd-yyyy')}"/>
</div>
<div th:unless="${item.validation == 'dob'}" >
<input class="form-control" th:id="${item.name}" th:name="${item.name}" th:placeholder="${item.placeholder}" th:required="${item.required}"
th:type="${item.type}"/>
</div>
</div>
</div>
Advertisement.kt
class Advertisement(val media: ArrayList<MEDIA>? = null)
class Form(
val type:String="",
val required:Boolean,
val label:String="",
val placeholder:String="",
val name:String="",
val value:String="",
val validation:String="",
val min:Int,
)
As other answer suggested you can do it with javascript.
You can make use of this jQuery validation API
And add a custom validation method like so:
jQuery.validator.addMethod("olderThan21", function(value, element) {
return //age calculation logic if true-> validation pass
//if false->validation error }
, "You must be 21+ to subscribe");
In case that the validation isn't passed satisfactory this will prevent the form from submitting.

how to add the placeholder value to ngmodel

I am following an example in primeng in which I can add a new row to a table. Everything "seems" to work as long as I fill out all the fields in the input option. However, I want to add the place holder value to the NGmodel if the user does not change the value of the input. I tried everything (ng-init, ngvalue, etc etc) but I can never get the ngmodel to carry the value in the place holder... and the table gets fill with the 3 filled fields but not the one where the user did not type anything.
extract of the HTML....
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_id">Product ID</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_id" [ngModel]="myproduct.product_line_id" placeholder="{{ lastproductline + 1}}" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_1">Product</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_1" [(ngModel)]="myproduct.product_line_1" autofocus />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_2">Category</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_2" [(ngModel)]="myproduct.product_line_2" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_3">Sub Category</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_3" [(ngModel)]="myproduct.product_line_3" />
</div>
</div>
the ts file looks something like...
productlines = [];
myproduct: { [s: string]: ProductLines; } = {};
showDialogToAdd() {
this.newProductLine = true;
this.myproduct = {};
this.displayDialog = true;
}
save() {
let productlines = [...this.productlines];
productlines.push(this.myproduct);
this.finalproductchanges.push(this.myproduct)
this.productlinesClone = productlines;
this.myproduct = null;
this.displayDialog = false;
}
Any ideas will be greatly appreciated
I managed to change the code by adding the field directly in the controller.

How anchor tag is firing an HTML Action in MVC?

I have the following code:-
<div class="control-group">
<label class="control-label"><b>Contact</b> <span style="color: #f00; font-size: larger;">*</span></label>
<div class="controls input-append">
<input disabled="disabled" style="width: 210px" type="text" id="id-lookup-addjllcontact-contactid" defaultoid=""
defaultvalue="" oid="" value=""
field="SystemUserId" otype="systemuser">
<a class="btn" id="btn-lookup-addjllcontact-contactid"><i class="icon-search"></i></a>
</div>
</div>
<div>
#Html.Action("_LookupSearchPartial", "Lookup",
new
{
ParentFormId = "form-addjllcontact",
LookupInputId = "id-lookup-addjllcontact-contactid",
LookupButtonId = "btn-lookup-addjllcontact-contactid",
UniqueId = Guid.NewGuid(),
EntityType = "systemuser",
AttributeName = "systemuserid",
AttributeDisplayName = "FullName"
})
</div>
When I click anchor with id as "btn-lookup-addjllcontact-contactid", it fires the HTML Action. Can any one tell me how ? Also I want to know how can display the result of the HTML Action in a modal.
There was Javascript in the page somewhere hidden which was doing it. This was a generic javascript file that was handling all the lookups in the application.
this.lookupInput = $('#' + this._config.LookupInputId);
this.lookupButton.live("click", this, JLL.Lookup.Search.showLookup);

How to bind ngFormModel in angular2 using Dart?

The following works in a form (the form is displayed)
.html
<form (ngSubmit) = "onSubmit()"
#nameForm = "ngForm">
{{diagnostic}}
<div class = "mdl-card mdl-shadow--3dp layout horizontal wrap">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">Name</h2>
</div>
<div
class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input
required
type = "text"
[(ngModel)] = "name.first"
ngControl = "first"
#first = "ngForm"
(input)="onInputHandler($event)"
class = "mdl-textfield__input ng-valid"
id = "first">
<label
class = "mdl-textfield__label"
for = "first">First</label>
<span [hidden] = "isFirstValid"
class = "mdl-textfield__error">{{firstErrorMsg}}</span>
</div>
<div class =
"mdl-card__actions mdl-card--border">
<button id = "startButton"
class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"
>Submit
</button>
<br>
<button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Button All
</button>
</form>
Trying to follow the example at Forms and Validation in Angular 2.0,
I cannot get the UI to display by changing the first line of the form to
<form (ngSubmit) = "onSubmit()"
[ngFormModel]="form" #f="form">
{{diagnostic}}
..
With the change the browser simply does not display anything as if it cannot parse the markup - the error is actually shown in pub-serve or debug mode.
Transform TemplateCompiler on epimss_ng2_reg|lib/components/name_component.ng_meta.json threw error: Template parse errors:
There is no directive with "exportAs" set to "form" ("
<div [hidden] = "isSubmitted">
<form (ngSubmit) = "onSubmit()"
[ng-form-model]="form" [ERROR ->]#f="form">
{{diagnostic}}
<div class = "mdl-card mdl-shadow--3dp layout horizontal wrap">
"): NameComponent#12:31
....
Why is this not working?
Seems this was changed since when the blog post was created.
NgForm is now exported as ngForm instead of form.
[ngFormModel]="form" #f="ngForm">
It's correct in the GitHub source but not in the blog post.
Full component according to the example in the blog post in Dart
#Component(selector: 'form-element')
#View(template: '''
<h1>form-element</h1>
<form (ngSubmit)="onSubmit()" [ngFormModel]="form" #f="ngForm">
<div>
<div class="formHeading">First Name</div>
<input type="text" id="firstName" ngControl="firstName">
<div class="errorMessage" *ngIf="f.form.controls['firstName'].touched && !f.form.controls['firstName'].valid">First Name is required</div>
</div>
<div>
<div class="formHeading">Street Address</div>
<input type="text" id="firstName" ngControl="streetAddress">
<div class="errorMessage" *ngIf="f.form.controls['streetAddress'].touched && !f.form.controls['streetAddress'].valid">Street Address is required</div>
</div>
<div>
<div class="formHeading">Zip Code</div>
<input type="text" id="zip" ngControl="zip">
<div class="errorMessage" *ngIf="f.form.controls['zip'].touched && !f.form.controls['zip'].valid">Zip code has to be 5 digits long</div>
</div>
<div>
<div class="formHeading">Address Type</div>
<select id="type" ngControl="type">
<option [value]="'home'">Home Address</option>
<option [value]="'billing'">Billing Address</option>
</select>
</div>
<button type="submit" [disabled]="!f.form.valid">Save</button>
<div>
<div>The form contains the following values</div>
<div>
{{payLoad}}
</div>
</div>
</form>
''')
class FormElement {
ControlGroup form;
String payLoad;
FormElement(FormBuilder fb) {
form = fb.group({
"firstName": ['', Validators.required],
"streetAddress": ['', Validators.required],
"zip": [
'',
Validators.compose([ZipValidator.validate])
],
"type": ['home']
});
}
void onSubmit() {
payLoad = JSON.encode(this.form.value);
}
}

Dynamic POST Radio Button

I create, dynamically, groups ou radio button in the "jQuery(document).ready(function())".
The partial code is:
(...) texto_html = texto_html + ""+record.descricao_equipamento+":"+record.nome_fornecedor+" ("+record.preco_equip_fornecedor+"€)";
(...)
The output is ok, one example:
<h5 class=""><strong>Transmissor 1:</strong></h5>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<label class="radio line">
<input type="radio" name="optionsRadios11" value="11">Texto 1
</label>
</div>
</div>
<h5 class=""><strong>Transmissor 2:</strong></h5>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<label class="radio line">
<input type="radio" name="optionsRadios12" value="120">
Texto 2
</label>
<label class="radio line">
<input type="radio" name="optionsRadios12" value="12">
Text 3
</label>
</div>
Now I want to POST my Form with AJAX (data: $("#myForm").serialize(),(..)
My problem is in my php file (that will retrieve the Posted values). How can I know how many radios groups I have? Is there a way to serialize them with, let's say an array of radios? Because really I just want their value, independently if they belong to group1 or group2 ou whatever.
thank you.
I'm stuck here! :)))
If I understood correctly you want to iterate over all the radios that were sent:
I can think of two ways of doing that:
You can iterate over all the $_POST values and filter them by a regex (to get just the "optionsRadiosXX" ones)
you can also append a new parameter in your http post (after form.serialize) with all the radios under a given form and then use this parameter as a guide in your php.
.
var getRadios = function() {
var map = {};
$("#formID input[type=radio]").each(function(){
var e = $(this);
if(!map[e.attr("name")]) {
map[e.attr("name")] = true;
}
});
var a = []
for(var r in map) {
a.push(r);
}
// alert(JSON.stringify(a));
return a;
}
See here an example: http://codepen.io/anon/pen/IKayC
Hope that helps.

Resources