So this should be pretty simple, I just want to combine a repeating section within a nested form using Formly.
There are examples for doing each of these individually but I cannot find any examples that combine these functions.
Repeating Section
http://jsbin.com/murule/32/edit?js,output
Nested Forms
http://jsbin.com/zaqeke/22/edit?js,output
I would be very appreciative of anyone who could help!
An example would awesome if possible.
Repeating Section is a complex example of Nested Form
You can see in repeatSection.html repeater ng-repeat="element in model[options.key]"
<div class="repeatsection" ng-repeat="element in model[options.key]" ng-init="fields = copyFields(to.fields)">
<formly-form fields="fields"
model="element"
form="form">
</formly-form>
<div style="margin-bottom:20px;">
<button type="button" class="btn btn-sm btn-danger" ng-click="model[options.key].splice($index, 1)"> Remove </button>
</div>
Related
I am using nightwatch.js to perform end-to-end testing and have to use a roundabout method for a waitForElementVisible command to work as expected. For example, my code below:
browser.waitForElementVisible(".profile label[for='Admin']") // works
browser.waitForElementVisible(".profile label[for='Admin'] input[id='Admin']") // breaks
For further clarification, I am testing to see if a radio button is visible. The radio button's DOM elements is as such:
<div class='profile'>
<div class='roleSelector'>
<label for="Admin">
<input type="radio" id="Admin" class="Admin">
</label>
</div>
</div>
As far as I know, there is no such specific case.
Did you try using '.profile input[id='Admin']' ?
Hope that serves your purpose at hand.
I am trying to add buttons to my Spartacus storefront.
The problem that is preventing me to progress ahead is:
1)If I generate new button angular component, using Angular, should it be mentioned inside the
tag or outside of that?
2)Should it be rendered in a different way as first?
Check out this repo and the corresponding stackblitz project. The easiest way add new buttons would be to place it in reference to an existing standard component using the outlets. Essentially, you could do some like the following, placing your new angular component app-custom-component before the ExistingComponent.
<ng-template cxOutletRef="ExistingComponent" cxOutletPos="before">
<app-custom-component></app-custom-component>
</ng-template>
Can you describe the problem more clearly? As much as I understood you are looking for below kind of code. For code check this link Spartacus Product Page
<div class="row">
<div class="col-md-6">
<button
class="btn btn-block btn-action"
(click)="addAddressButtonHandle()"
>
{{ 'addressBook.addNewAddress' | cxTranslate }}
</button>
</div>
</div>
I am trying to retrieve multiple values from HTML and make use of it using req.body..
I am able to do this via message: req.body.message
<form id="message-form" class="input-group input-group-lg" style="">
<input type="text" name="message" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
<div class="input-group-prepend">
<button class="btn btn-primary">Send</button>
</div>
</form>
However, I would like to retrieve the values from elements that are not inside the e.g <span id="item" style="font-weight:bold"> </span>
The reason is that when I load the page, it renders these values dynamically (retrieved from database). When I want to do a POST, I would like to make use of these values that have been rendered previously.
Is there a way to do this?
Many thanks.
Forms don't submit data that does not appear inside a form control.
So you can either:
Store the data somewhere in the server (such as in a session) where you can read it back on a subsequent request (watch out for race conditions!) or
Put the data in a form control instead of or as well as in the span. (Possibly using a hidden input).
At this moment I'm working on a project where we use Aurelia in combination with Material Design Components. Because the project is fairly new, we are using MDC version 0.13.
We are using multiple select fields and some of them should have an initial value, like the snippet below:
<select value.bind="_PersonID" class="mdc-select mdc-list-item__end-detail">
<option model.bind="null">Select person</option>
<option repeat.for="person of Persons" model.bind="person.ID">${person.Name}</option>
</select>
This works great and like we expected it to work. But now we want this kind of behavior with the mdc-select structure & styling. For that we use the following:
<div mdc-select role="listbox" class="mdc-select mdc-list-item__end-detail">
<span class="mdc-select__selected-text">????</span>
<div class="mdc-simple-menu mdc-select__menu">
<ul class="mdc-list mdc-simple-menu__items">
<li class="mdc-list-item" role="option" repeat.for="person of Persons" model.bind="person.ID">${person.Name}</li>
</ul>
</div>
</div>
The problem with this piece is that we've only a "CurrentPersonId". But we have to define the name in the tag. In the documentation of MDC, it also declares an "aria-selected" attribute in the li. When we put that on the li tag, it won't update the span on init.
I have a snippet called sidebar with the following code.
<div id="ebook_offer">
{exp:channel:entries channel="test"}
<h3>Ebook</h3>
{/exp:channel:entries}
</div>
<div id="about_blog">
{exp:channel:entries channel="blog_sidebar"}
<h3>About Obsia's Blog</h3>
{/exp:channel:entries}
</div>
<div id="testimonials">
</div>
<div id="demo" dynamic="no" limit="1">
</div>
<div id="recent posts">
{exp:channel:entries channel="blog" limit=5 offset=1}
<h3>Recent Posts</h3>
<li>{title}</li>
{/exp:channel:entries}
</div>
<div "connect">
</div>
<div = "subscribe">
{exp:mailinglist:form list="blog_list" form_id="blog_subscribe"}
<h3>Subscribe</h3>
<p>First Name <input type="text" name="first_name"="{first_name}"></p>
<p>Email <input type="text" name="email" value="{email}"></p>
<p><input type="submit" value="submit"></p>
{/exp:mailinglist:form}
</div>
This snippet is called inside the index.php template for blog template group and the code is as follows:
<div id="blog_display">
{exp:channel:entries channel="blog" limit="5"}
<h2>{title}</h2>
{author}
{if blog_images} <img src="{blog_images}" alt="blog image {title}" class="some_class" />
{/if}
{teaser}
<p>comments {comment_total} </p>
{/exp:channel:entries}
</div>
{sidebar}
I also have channel called sidebar with fields such as ebook_offer, about_blog, recast posts, testimonials, subscribe. I can get the subscribe forms to show up. I can see recent posts on my webpage but can't see any of the content that has been filled in about_blog field.
Anyone know why blog channel works but not my sidebar channel.
I'm not quite sure what the problem is exactly without having all of your code in front of me, but it could be a few things. For starters, if your blog homepage template has an {exp:channel:entries} tag in it, and you're including the snippet inside of that tag, you'd run into problems. You can't nest an {exp:channel:entries} inside of another.
Also, channel entry tags are set to dynamic by default. They will look at the URL for hints about what entries to pull from the database. Try adding the dynamic="no" parameter to your sidebar entries tag, which you can learn more about here. This should make the tag ignore the page's URL, which is what you want. You might also want to add the limit="1" parameter to that tag as well, to ensure that only one sidebar entry is being rendered.
Please let me know if neither of those answers help!
The best strategy would be to move what's in your snippet into a separate template file while you try to figure this out. I noticed a couple of things that seem off to me in your sidebar snippet code.
<div id="ebook_offer">
{exp:channel:entries channel="test"}
<h3>Ebook</h3>
{/exp:channel:entries}
</div>
<div id="about_blog">
{exp:channel:entries channel="blog_sidebar"}
<h3>About Obsia's Blog</h3>
{/exp:channel:entries}
</div>
This doesn't really seem the right way to use the {exp:channel:entries} tag. You mentioned "ebook_offer" was a channel field. But here you're using it as a static id for an HTML div. If "ebook_offer" is a field I would expect something like this:
<h3>Ebook</h3>
{exp:channel:entries channel="test"}
{ebook_offer}
{/exp:channel:entries}
Same with "about_blog"
<h3>About Obsia's Blog</h3>
{exp:channel:entries channel="blog_sidebar"}
{about_blog}
{/exp:channel:entries}
Also I noticed you said the channel was named "sidebar" but in your {exp:channel:entries} tag you're using "blog_sidebar". Which isn't the same thing, is your channel's shortcode "sidebar" or "blog_sidebar"?
Finally this is a little off to me
<div id="demo" dynamic="no" limit="1">
</div>
"dynamic" and "limit" only work on ExpressionEngine {exp:channel:entries} tags, not regular HTML elements (like DIVs). I would try using Bitmanic and Peter's suggestion again, but apply it to {exp:channel:entries} like so:
{exp:channel:entries channel="blog_sidebar" dynamic="off"}
...
{/exp:channel:entries}
If you're new to ExpressionEngine I highly recommend videos & tutorials by Ryan Ireland http://eeinsider.com/videos