I'am developping a form and there is a "Wizard Button" if this wizard button is true, the form is presented as a wizard.
Is there an easy way to avoid code duplication?
As an Example:
<wizard on-finish="saveit()" ng-if="data.form.config.wizardmode">
<wz-step title="Starting" ng-if="$index==0 && data.form.config.wizardmode">
<h1>This is the first step</h1>
<p>Here you can use whatever you want. You can use other directives, binding, etc.</p>
<input type="submit" wz-next value="Continue" />
</wz-step>
<wz-step title="Continuing">
<h1>Continuing</h1>
<p>You have continued here!</p>
<input type="submit" wz-next value="Go on" />
</wz-step>
<wz-step title="More steps">
<p>Even more steps!!</p>
<input type="submit" wz-next value="Finish now" />
</wz-step>
</wizard>
If the wizard is off, I would have to write the whole form again?
Is there a good logic (an angular way) basically to hide/display all <wz-step> tags?
Thanks, Patrick
Please check if this is what you are looking for. I've made a plunkr.
Plunkr
Basically I wrote the wizard directive and it's child directive called wizardStep.
<wizard showWizard="showWizard">
<wizard-step step-number=1>
Step 1
</wizard-step>
<wizard-step step-number=2>
Step 2
</wizard-step>
<wizard-step step-number=3>
Step 3
</wizard-step>
</wizard>
Related
How can I validate one ng-include at a time,
<form name="myform" ng-submit="validateData()" novalidate="novalidate">
<div>
<div ng-include="customtemplate"></div>
</div>
<div class="center">
<input class="btn buttonNewRequest" type="submit" id="submit" value="Submit" />
<input class="btn buttonNewRequest" type="button" id="reset" value="Reset" />
</div>
</form>
I am using the two different templates dynamically using customtemplate, my problem is here, it's validating both template same time.
So how to restrict one template for validation at a time.
Please suggest a better way, I have no clue about this.
Try the example section here: https://docs.angularjs.org/api/ng/directive/ngInclude
Did you try the ng-if directive to conditionally check one template at a time.
Also please include some example code where exactly facing this issue.
you should include file conditionaly use ng-if propoery it will work
I'm developing a small AngularJS (1.6) app, trying to use a component-based architecture.
On my HomePageComponent, I have three different sub-component A, B and C, which all contains different content such as input fields, datepickers and a list. It should not be possible to navigate to the next page (state) if a validation in any of my sub-components fails. The "Button A" should therefore be disabled - ex. name input field in component A is not set.
However, I can't seem to find a reasonable solution/pattern on how to achieve this functionality while using components.
Does anyone have a proper solution for this?
Thanks in advance
You could consider using a wizard such as angular-wizard . From the github page:
<wizard on-finish="finishedWizard()" on-cancel="cancelledWizard()">
<wz-step wz-title="Starting">
<h1>This is the first step</h1>
<p>Here you can use whatever you want. You can use other directives, binding, etc.</p>
<input type="submit" wz-next value="Continue" />
</wz-step>
<wz-step wz-title="Continuing">
<h1>Continuing</h1>
<p>You have continued here!</p>
<input type="submit" wz-next value="Go on" />
</wz-step>
<wz-step wz-title="More steps">
<p>Even more steps!!</p>
<input type="submit" wz-next value="Finish now" />
</wz-step>
</wizard>
I have this form:
<div id="buscador">
<form action="<?php echo Router::url(array('controller'=>'categorias','action'=>'buscar'));?>" name="form_search" id="form_search" method="post" >
<input type="text" name="search">
<input type="submit" value="Buscar" class="buscador" id="boton_buscar"/>
</form>
</div>
It works fine in all controllers except when you are using the controller "categorias"... in that case, the result is this: http....Categorias/buscar/Buscar
Any idea why this happens?
The problem was present elsewhere, I didn't consider that when clicking the button inside the View "buscar", then JS acts on that click (and this generates the buscar/Buscar problem)
Having this ordinary (name attribute is requred by server) form with angular and can't figured out how to make validations work. What should i put into ng-show="TODO"
http://jsfiddle.net/Xk3VB/7/
<div ng-app>
<form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
<div ng-repeat="variant in variants" ng-form="variant_form">
<div>
<label>Duration:</label>
<input name="variants[{{$index}}][duration]" ng-model="variant.duration" required />
<span ng-show="TODO">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="variants[{{$index}}][price]" ng-model="variant.price" />
<span ng-show="TODO">Price required</span>
</div>
</div>
</form>
</div>
ps: this is just piece of form, which is more complicated
Thanks
AngularJS relies on input names to expose validation errors.
Unfortunately, as of today it is not possible (without using a custom directive) to dynamically generate a name of an input. Indeed, checking input docs we can see that the name attribute accepts a string only.
Long story short you should rely on ng-form to validate dynamically created inputs. Something like :
<div ng-repeat="variant in variants" >
<ng-form name="innerForm">
<div>
<label>Duration:</label>
<input name="duration" ng-model="variant.duration" required />
<span ng-show="innerForm.duration.$error.required">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="price" ng-model="variant.price" required/>
<span ng-show="innerForm.price.$error.required">Price required</span>
</div>
</ng-form>
Working fiddle here
UPDATE : Base on your serverside requirement why not do something like that :
<input type="hidden" name="variants[{{$index}}][duration]" ng-model="variant.duration"/>
<input name="duration" ng-model="variant.duration" required />
The hidden input will be the one read by the server while the other one will be used to do the client side validation (later discarded by server). It s kind of an hack but should work.
PS : Be sure that your form is valid before actually submitting it. Can be done with ng-submit
I am new to AngularJS.
In the following fiddle, when user clicks on "This submit triggers validation. But I wanted to put this button at the end of the page" button. I could see alert/error but I want to show a custom message, which I am struggling to do it.
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" ng-click="triggerSubmit()">Wanted this submit to trigger the validation to the form on which this button doesn't belong, e.g. trigger to header</a>
js fiddle link
http://jsfiddle.net/unWF3/6/
Thanks,
Kalyan Basa
To disable native browser validation add novalidate attribute to form element:
<form novalidate submit-on="myEvent" ng-submit="onSubmitted()">