I'm starting to use model based forms in my angular App. So far I have been suing template based forms and I bind my data using [(ngModel)].
I noticed that using [(ngModel)] in reactive forms is possible, but I've been reading on stack that it's a bad practice, but I can't find (or missed) anything about this in the docs.
Is it true that you should avoid using when you are working with reactive forms? If so, what would be the correct way to bind data to an input?
Right now I do something like this:
My component:
this.assignForm = this.fb.group({
"balance": [null, Validators.required]
});
My Template
<input type="text" formControlName="balance" [(ngModel)]="myData.Balance" />
Every HTML input element is wrapped by an angular class called FormControl. FormBuilder creates the FormControls explicitly. Putting NgModel on a element will also create a FormControl.
In your example, you have two FormControl objects for the same element.
Assuming they don't fail due to name clash (like <input name="myname" formControlName="myname" [(ngModel)]="model.prop" /> would register myname with the FormGroup twice), then you might get different answers on valid/invalid/touched/dirty depending on which one was queried.
Your question title and question completely mix up model based and reactive, where your code uses them both combined. Using both combined results in absolutely no guarantee that the value you see and the value your form controller contains are equal. Just do not do it.
The correct way would be:
this.assignForm = this.fb.group({
"balance": [myData.Balance, Validators.required]
});
Related
Is it possible to add ignorable fields to Angular 2's reactive forms?
To simplify things, look at this Form:
this.form = new FormGroup({
subTasks: new FormArray([]),
});
Each subTask will be solved by the user and the solution is saved inside the FormArray.
Now in order to display the text of the different subTasks, I added a FormControl called "text" to each subTask. But when the user submits the form, I don't want the task text to be sent to the server along with the user input.
I know I could just not use it, or remove it programmatically before submitting, but I was wondering if there is a way to do it clean. Thanks!
What you could utilize is to disable the formfield text, which means that the field is not included in the form object, but you can still use it. Sample:
this.myForm = this.fb.group({
text: [{value:'text value', disabled: true}],
somethingElse: ['something else']
});
and in template:
<form [formGroup]="myForm">
<p>{{myForm.get('text').value}}</p>
<input formControlName="somethingElse">
</form>
If you want to inspect the whole form object, disabled fields included, you can use:
this.myForm.getRawValue();
I'm trying to set a class or id parameter on a <h:inputHidden> in JSF. The code looks like this:
<h:inputHidden value="#{getData.name}" class="targ" />
But in the browser, the class isn't set:
<input type="hidden" name="j_idt6" value="j_idt6">
I need to set a class to this parameter, because I have a JavaScript autocomplete function for a <h:inputText> that sets a value in the hidden input, which needs to be passed in the next page.
Any ideas? Thanks!
I know it's a little bit late, but it can help someone in the future.
As inputHidden shows nothing in the browser there's no sense to allow it to have a class.
You can use the Id but as the Id could change as you change the component parents using it would bring some headache.
I'd suggest as a workaround, you can give it a parent so you can manipulate it by javascript.
Exemple:
JSF
<h:panelGroup styleClass="someCssClass">
<h:inputHidden id="someId" value="someValue" />
</h:panelGroup>
Javascript (using jQuery, you could use pure javascript also)
$('.someCssClass input[type=hidden]').val('yourNewValue');
None of these answers here satisfied my needs (need the PrimeFaces component, need class not ID, wrapping is too much work), so here's what I came up with:
Use pass-through attributes: https://www.primefaces.org/jsf-2-2-pass-through-attributes
Use pass:hidden-class="blah" (in my case, it's xmlns:pass up top)
Use [attribute=value] selector:
https://www.w3schools.com/cssref/sel_attribute_value.asp
document.querySelector multiple data-attributes in one element
That basically boils down to using something like this (because h:inputHidden becomes a regular input): document.querySelector("input[hidden-class=" + blah + "]")
Please, see similar question - How can I know the id of a JSF component so I can use in Javascript
You can sed "id" property, but in final html code it can be not the same, but composite: for example, if your input with id="myhidden" is inside form with id="myform", final input will have id="myform:myhidden".
In the end, I used a standard HTML <input type="hidden"> tag, as I had no advantages for using the JSF one. If you're trying to set a value in a hidden input with JavaScript, I recommend using this workaround.
I am having trouble creating a property-dependent create/edit-view in KnockoutJS.
Here's the thing: everything I create are "People" of sorts - it could be a Healthcare Professional, Plumber, Mechanic or Engineer. Depending on what kind/type of person it is, I need to enter different data.
Here an example:
Healthcare Professional: Name, Telephone, Hospital, etc.
Plumber: Name, Telephone, Crafts, etc.
Engineer: Name, Telephone, Specialities, etc.
What I can do is create properties on my ViewModels such as "showCity", "showHospital" and so on to hide individual form-fields.
However, for the sake of separation, I would like to use entirely different forms: again, I could set the respective form to only show if the condition is met.
However, I would like KnockoutJS to only render the respective form that should be used (the Person's type is always determined when it is first created - it cannot be changed).
What I don't end-up doing is have one form that is shown and ten that are there (and data-bound) but hidden.
I tried using the "if" binding like so: <div data-bind="with: $root.selectedPerson"><form data-bind="if: $data.type='mathematician'"></form></div>, but to no avail.
Would anybody know what the best-practice is in this case?
Your if binding is setting the $data.type value, not comparing it. Try:
<div data-bind="with: $root.selectedPerson"><form data-bind="if: $data.type() === 'mathematician'"></form></div>
Although this is fine, I always try to avoid code in my data-binding markup. I would try and create a computed that would return the resulting true/false of the comparison, but in your situation, you would need one for each person type, and that would get tricky. For that, I would turn to templates. You could do:
<div data-bind="template: { name: $root.selectedPerson().type, data: $root.selectedPerson }"></div>
<script type="text/html" id="mathematician">...</script>
<script type="text/html" id="plumber">...</script>
*Note: As of KO version 2.3.0, the name property of the template binding can accept observables. If you're using a previous version, be sure to call the observable in the binding: name: $root.selectedPerson().type()
One part of my meteor application is a semi-collaborative table where users can edit different rows at the same time. When a user is editing a row, the static text values need to switch to input boxes so that the values can be edited and then saved. I would like a template/helper to do this, essentially I want:
<td>
{{#if iAmEditing}}
{{foo}}
{{else}}
<input type="text" name="foo" value="{{foo}}">
</td>
except that there are several columns with different values of "foo" and I don't want to copy and paste this several times. What's the right way to approach this with templates and helpers?
Another approach might be to use the HTML5 contenteditable attribute. Either way, what is the right way to template these values with handlebars?
You should be able to integrate with Bootstrap Editable
For reference, an answer to the original question...
As of today, handlebars partials can't accept anything other than a context argument, but helpers can. Hence. you can define a helper that sets up the context for the template:
Coffeescript:
Handlebars.registerHelper "eventCell", (context, field, editable) ->
return new Handlebars.SafeString(
Template._eventCell
_id: context._id
field: field
value: context[field]
editable: editable
)
Template:
<template name="_eventCell">
<td><div data-ref="{{field}}" class="{{#if editable}}editable{{/if}}">
{{value}}
</div></td>
</template>
Then, I just use the following to render each field:
{{eventCell this "province" iAmEditing}}
I ended up integrating with bootstrap editable, so the template is a little different than my original question. Also, I'm not sure if this is the best way to do it, but it's a lot cleaner than what I had before.
meteor-editable is a new project implementing something like x-editable, but nicely integrated with Meteor reactivity. Unfortunately inline editing is not supported yet (you have to use a popover the way it's set up now).
Everybody's aware of passing parameters to a controller via a html form:
<g:form action="save">
<g:textField name="text1" />
</g:form>
And I'm vaguely aware of being able to structure these parameters into some sort of object notation in Grails:
<g:form action="save">
<g:textField name="text.a" />
<g:textField name="text.b" />
</g:form>
With very little idea how they are structured in the controller (objects? hashmaps? I recall having to use .value at some point using the latter example).
So I guess this question is really two questions:
How does Grails handle parameters in object notation like the second example? Can you stick them into arrays too?
What are some other tricks regarding form submission and its parameters that can make forms with very complex and iterative data trivial to handle in the controller? For instance, ATG allows you to bind form fields to beans and walk its entire property graph to find the property you need to set.
The second notation "text.a" is used to disambiguate data conversion from properties to domain objects. For example, if you have 2 domain objects each with a property "a", if you do domObj1.properties = params and domObj2.properties = params the value will go to both domain objects which may not be what you want. So in your view you should have variables domObj1.a and domObj2.a and in your grails controller you can instantiate using def domObj1 = new DomObj1(params["domObj1"])
By your second question if you mean whether you can iterate over objects, you very well can, using GPath syntax in a ${} wrapper, for e.g check out the code in the id property below.
<td><g:remoteLink controller="device" action="getDevice" id="${objInstance.prop1.prop2.id}" update="propDetail">${fieldValue(bean: objInstance.prop1, field: "prop1")}</g:remoteLink></td>
The example above also shows an ajax way of form submission from grails gsp.