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
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.
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.
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);
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);
}
}
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.