I've an object in salesforce and i want to make a form to enter values based on how many related list objects there are. Since i dont know how many related list objects there are i wanted to try and use a repeat on the page.
<apex:repeat value="{!prompts}" var="pmpt">
<div>
<label>{!pmpt.Name}</label>
<div>
<apex:inputText value="{!pmpt.DefaultValue__c}"/>
</div>
</div>
</apex:repeat>
So the code above gets the list of related list records (prompts) from the controller and displays a label and the inputText value assigned to it with the default value displayed. This works fine but i don't know how to read these values back in my controller when the user changes them from the default. Thanks.
The easiest way to do this is to assign to a variable in your Controller.. instead of
<apex:inputText value="{!pmpt.DefaultValue__c}"/>
it would be
<apex:inputText value="{!Your_Controller_Variable}"/>
This way when you submit the form the values in your input fields would be assigned to your variables in the controller and then you can perform any process you want with them
Now, since you have a repeat... and every input is related to a different record, what you can do is to change the inputText to inputField, then add a button submit the form on your page.. this will show the current values for each object field and.. will update the records on your list (the one you are using in the repeat). Have it like this:
<apex:inputField value="{!pmpt.DefaultValue__c}"/>
The inputField would assign the value to the corresponding record field on its own when you submit the form.
Related
So I have a select box which populates some values into the dropdown using ng-options So I want to show the error messages as soon as the user click on the dropdown and focus out without making a selection.
JS Code
$scope.someMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
];
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in someMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
So it is working in a case where I add a blank option like option value="" selected hidden/> </select> and select some valid value and then select the blank option again, it gives error message as Required field.
But as you can see, the above selectbox will be blank once the page loads, so if use click on the dropdown and focus out without selecting or move to other field without selecting any value it should give error as Required field.
now if I try to iterate through the value of form.inpName.$error is never having any value and i cannot validate it using the above technique.
I have tried ng-show , ng-if , message expression may be am lacking some expertise.All of them works after selecting valid entry from dropdown and then moving back to blank option.
Solutions which would not work for me
Check model value:I do not want to go to model for these types of field and check if they are blank then show some error message, rather I want to iterate through the $error array and find the issue with the field
Make the default option selected when page loads- Cannot do it.
Add a field as selected one options : This will also not work because if the user did not touch the selection at all and filled all other fields the $error will not be populated for this select dropdown.
Any help would be much appreciated, really struck on this one.
As helped by #Ininiv in above post the code i posted works fine in plunker but not in my dev environment.
So based on some POJO/Entity out objects gets formatted with properties as null.So when i select and the option populates angular does not see as a change in the model, unless i select a value from dropdown and select a blank option from dropdown again. It gets activated.
But I wanted it to start working from the first touch itself, if left blank the error message should pop up.
To tackle this the ngModel needed to be set to null, when the dropdown the $error thing is activated and If i leave it blank and move to other field the error shows up.
So basically on the change of model only the ngMessages directive get activated which was not happening for dropdowns which were populating based on some object properties.
I am trying to create a multistep form and step 2 is a bunch of checkboxes. Here is the form with checkboxes:
<form ng-submit="createSubCategory(formData)">
<div ng-repeat="sub_category in event_sub_categories">
<ion-checkbox ng-model="formData.sub_category" ng-true-value="'{{sub_category}}'">
{{sub_category}}</ion-checkbox>
</div>
<button type="submit" class="button button-block button-positive">Continue</button>
</form>
The data for the checkboxes (event_sub_categories) is pulled from a server. I need to save the inputs selected by the user to formData. formData is being collected on each page of the multistep form and it will be submitted with a post request after all of the form pages. I am new to angular and I am somewhat confused as to how check boxes work.
Question 1: I understand how ng-model works with normal textfields. But I'm not sure I get how it works with checkboxes. Does ng-model replace the html name element? Meaning, when I submit this to the server using $resource, are the keys of the data set by ng-model?
question 2: How can I name ng-model so that it is part of formData but so that it is also related to the name of sub_category being pulled from the database. The problem is that with the code above, only one checkbox can be selected at any given time and I want the user to be able to check many checkboxes at a given time. If it's not possible to do this, how can I get the functionality I need with checkboxes?
To be able to select multiple checkboxes at once you need an object (angular) to hold all of the values. I have implemented this code in my own applications and find it fairly easy for the function receiving it to interpret the object. (iterate the object checking for true/false values)
Here is your <ion-checkbox> code:
<ion-checkbox ng-repeat="sub_category in event_sub_categories" ng-model="formData[sub_category]">
This will set subcategory: true/false inside the formData object for every checkbox that is clicked.
Then all you need to do is send that formData object to where ever, the same way you were doing as before. Here is a codepen that displays the checkboxes changing, the updated formData object and the formData object stringified.
http://codepen.io/anon/pen/LNdaev?editors=1010
I have created my own values for event_sub_categories as an example, so of course these would be different from your own
Comment if you have any questions.
I am new to AngularJS, and I have a problem with ng-model.
Here's my code:
<section class="field row" ng-repeat="field in fields">
<input class="value" ng-show="editMode" placeholder="{{field.name}}" ng-model="field.value" type="url" />
</section>
As you can see, I'm looping through $scope.fields which I got from the server and is an array of about 40 objects that have keys like name and value.
Inside the section I have an input, which has the ng-model property set to field.value. When the server gives a value to the field, it is shown inside the input.
At some point I want to update the user's changes, by sending $scope.fields back to the server.
However, when the user changes something in the inputs, the value for the changes fields becomes undefined.
I hope this describes my problem well enough.
Thanks!
To get the changes, you should pass the original object name i.e fields. Refer below calling fn
ng-click="save(fields)"
The reason this caused a problem is simply because the input was a URL input and I was typing simple "hello" strings to test it, instead of typing URLS. Apparently AngulaeJS only puts the answer in the model if it matches the field type.
I need to display the next field in my form depending on the last value selected in the form. All fields in my form are independent views, specifically are ng-include.
The idea is not to show all fields when the page loads, and instead, show the next field according to the value selected in the previous field.
Example 1:
My first input (my first ng-include) is a text field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Example 2:
This time my first input (my first ng-include) is a checkbox field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Thanks.
Are you familiar with ng-show?
- It shows or hide element depended on value which you declare in ng-show tag.
You can wrap each field (or a group of fields) in ng-form and show the next section depending on the validity of the form of the current section. The fact that elements of the form are delivered via ng-include has little bearing on the approach:
<div ng-form="form1">
<input ng-model="v.one" required min-length="3">
</div>
<div ng-form="form2" ng-show="form1.$valid && !form1.$pending">
<input ng-model="v.two" required min-length="3">
</div>
<div ng-form="form3" ng-show="form2.$valid && !form2.$pending">
<input ng-model="v.three" required>
</div>
This is, of course, at a high-level, and doesn't deal with cases where previous becomes invalid while the next form is showing. For those, more complicated, cases it is better to do the logic in the controller and expose the decision via a function or a scope variable, e.g. showForm2():
<div ng-form="form2" ng-show="showForm2()">
<input ng-model="v.two" required min-length="3">
</div>
I have this hidden input in my form
<input type="hidden" ng-repeat="dasBottle in bottles track by $index" value="{{ dasBottle.id }}" name="bottles[]" />
When a button gets clicked, the option currently selected in a select input gets added to the page:
$scope.bottles.push(bottle);
with the correct value and everything is fine.
<input type="hidden" ng-repeat="dasBottle in bottles track by $index" value="30" name="bottles[]" class="ng-scope">
The user can add as many of these as they wish and the value is correct every time.
However, if the user submits the form, but then presses the back button, the same process works, however each new hidden field has the value of the first hidden input added before the form was first submitted, in this case 30. The only way to get it back to normal is to refresh the page.
The scope variable does get set to an empty array when the controller is setup:
$scope.bottles = [];
Any help would be appreciated, thanks.
You might explicitly add index to the array of data you want to form from your form:
bottles[{{ $index }}]
My colleagues on the backend side say that this doesn't change the way data arrives to them, but strange behaviour gets fixed.