In angular-formly hideExpression remove fields from the DOM but not from the MODEL - angular-formly

When fields are remove from DOM due to hideExpression, its values in the model still exits and send on submit.
Using
angular-formly v8.4.1
angular-formly-templates-bootstrap version 6.5.1
¿How can I remove hidden Fields from de model or set them as null?.
Here you have an example of the problem:
http://angular-formly.com/#!/example/field-options/hide-fields
I want the checkbox state do not send in the model if checkbox is hidden.
Because if this checkbox is used for hide another third field, if we hide checkbox while is checked (using a hideExpression on it) this third field still show in the DOM which is a bit weird behavior because if checkbox is removed the third dependen field must be removed.
I have been able to observe that by simply putting null in the model the fields that are no longer in the DOM perfectly hide the dependent fields in chain
Please help to refresh model when hide fields.
Thank you in advance (sorry my bad English)

set it to use ng-if as the hideDirective in the formly-form

Related

Refresh edit box after information change

I have edit box which has validation- it is required field and it has range of values validation as well. The validation works ok, but the problem is that error message does not dissapear when I replace the values in edit box with valid ones. I tried to add full update on onchange event but this is not a option for me since this changes other fields in my xpage as well. The partial update on the field does not work. Any advice how to refresh the field so that error message dissapears?
Create a wrapper panel or div around BOTH the field and the error message control and set it's ID to the one that should be partially refreshed. I assume you use
XSP.partialRefreshGet("#{id:idOfYourField}")
in the onblur client event!? So just change the ID name here.

Conditional Client Side Validation?

I have a radio button group that gets it's values using an #Dblookup. In addition to the name to appear in the radio button group, the document also has a field to determine if another field on the xPage should be displayed or not.
If the field is displayed then it should be required.
I can do the conditional validation just fine in SSJS using an #DbLookup to lookup the document selected in the radio button group.
But I would like to be able to do it CS so it is faster and so it looks like my other validations. Is there anyway to do this?
If a field is not rendered then the node will not exist in the DOM. Your CS javascript would need to examine the DOM and look for the node, normally by looking for a specific ID. As Xpages changes the ID's sent to the browser your validation function would either need to be computed so it would know what ID to look for or you would need to look for it in some other unique way ( like add a css class name to just that field and then do a DOM search for nodes with that class name )
Once you can determine if the field has been rendered then you can run your usual CS validation routine against the other field.
If you're using client-side validation throughout your app, setting the required property on the field should achieve what you need.
If not, it may be worth looking at the Extension Library Dojo Validation Text Box. All the Extension Library Dojo control run client-side validation, even if validation is set as server-side at application level. Bear in mind that for the Dojo Validation Text Box, just setting the required property is not enough. You need to add more specific validation.
After that, the key is to ensure the partial refresh event on your radio group is set to skip validation. I haven't tried, but I believe that should achieve what you need.

The buttons in a repeat don't hide/show after refreshing the panel the repeat is in?

I have a repeat that has buttons embedded in it. The repeat is in a panel. When the user clicks a button the button should hide/show (I partial refresh the panel). The repeat is tied to a Domino view and I see the other values that I from that view get updated in the repeat, so, it does not seem like a view index issue (I refresh the view index in my code.)
If I use context.reloadPage() in my button onclick code then the buttons will hide/show like they should, but, that seems like I am using a sledge hammer! Any suggestions on how to get the buttons to recompute the visible property when the panel that holds the repeat is rendered? Another strange thing is that the visible property gets computed three times whenever I refresh the panel that holds the repeat.
thanks, Howard
I think your looking for
getComponent("<id>").setRendered(true / false);
Hi For Repeat control's entry is used to make our head hard. Because handling the entry by SSJS, we can get the value and set the value. But rendering part, id of the repeating component are same for all. So if we try to give reder as false. It hides all of our repeating component.
Try to use the following., [Put this in button onclick, and see the value of below]
var entryValue= getComponent("repeat1").getChildren().get(0).getValue()
getComponent("inputText1").setValue(entryValue)
But in client side we can easily handle. Because the id of the DOM object is unique for all repeating component.
var id1="view:_id1:repeat2:"+'2'+":button1"
document.getElementById(id1).style.display="none"
This will hide the third entry of your repeat control component.
Please see the post, You may get better idea
Found a solution. My original solution was getting values from the repeat rows (using the collection object, which was a viewentrycollection and using getColumnValues) to compute the rendered property for the buttons.
Instead, I created a viewScope variable (a Vector) that holds the state of the buttons (which set of buttons to show). This gets populated in the beforePageLoad event of the page.
The button onclick code updates this viewScope variable after performing its processing. All works very nice now. I guess it was something in the JSF lifecycle that kept the buttons from being properly updated. Using the viewScope variable works fine.
With addition to what Ramkumar said, you can use the index variable in the repeat control to identify each and every occurrences inside the repeat control. You will get more idea, if you inspect with element from firefox[You might need firebug]. Usually the field mentioned inside a repeat control itself can be considered as an array

Using standard validation for read only edit boxes?

Some of my recent posts have to do with the fact that I am doing all of my validation in my Submit button.
The reason I am doing this is that I have a button that sets some read only edit boxes. Well you can configure a validation for a read only edit box but it does not execute at run time.
Since I could not figure this out and wanted to have a consistent look for validation I used my own validation on my Submit button.
Is there a way to validate read only fields?
One nice thing about putting all of the code in the Submit button is that all of the validation code is all in the same place but I can see where it also can cause portability issues when using custom controls.
Also another question is how to fire off validation if my Submit button is not marked as a Submit button.
As Dec says, the ReadOnly flag causes the content of the field to be rendered without the <input> tag. This makes validation impossible on the client side and since there is no data being submitted back to the JVM, validation coded on the field is ignored on the submit.
However, the data source QuerySaveDocument is triggered. Put your validation in there and/or put it in the fields that are rendered (readOnly=false) and be sure to set disableClientSideValidation="true" on all fields with validators on them.
Your QuerySaveDocument code looks something like this (assuming location is the field which is readOnly).
if (personDoc.getItemValueString("Location") == "") {
#ErrorMessage("The inherited location is blank and that is bad.");
return false;
}
return true;
With this, the field based validators will fire first and if they are all successful the QuerySaveDocument fires. This means if any field based validators fail, their messages will appear in your message area but the QuerySaveDocument message will not appear. QuerySaveDocument messages ONLY appear after all field based validators succeed.
When a read only field is rendered to the web browser it does not render using <input> tags but rather a simple <span> tag.
Validation can only be performed on proper input tags so the scenario you are experiencing is correct. There is no field for it to validate in read-only mode.
There is an option to 'display disabled in read only' which will render an <input disabled="true"> type tag for the field but I'm not sure off the top of my head is validation will work for those fields either because if a field is read-only then there really should be no need for any validation because your programmatically putting the value into the field and you should be validating it programmatically before you add the value.

Stop browser forcing form element into window view

Any ideas how to stop browsers from forcing focused form fields into view when positioned overflow hidden?
How about moving the offending field off the page (position:absolute;top:-9999;)? That will take it out of view.
If you're wanting the field to appear where you originally put it however you could have a dummy set of fields (taken off the page with top:-9999) and transfer focus to them as the user goes through the form. If you update the fields in view as the dummy fields are changed then you can give the impression the user is manipulating the visible form.

Resources