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>
Related
When I'm rendering HTML from on server side (with JSP or another server-side technology) browser suggests me to save login / password inputs.
When I'm using ReactJS to render form I don't those suggestions from browser.
Is there any way to get form autofilling?
There is example of my form from ReactJS code
return (
<div>
<div className="registration-block">
<form onSubmit={e => this.handleSubmit(e)}>
<div className="registration-block-inputs">
<div className="input-block" id="input-block-0">
<div className="input-block-header">E-mail</div>
<input type="text" placeholder="E-mail" name="login" id="login"
value={this.state.login}
onChange={this.handleInputChange}/>
</div>
{passwordInput}
<SubmitButton buttonName={this.props.buttonName} processing={this.state.processing}/>
</div>
</form>
</div>
{popup}
</div>
);
You want to use the type="password" or type="email" HTML attributes so that the browser can determine the kind of information the input is accepting.
All the form attributes are set by putting certain attributes on the actual html elements. You use certain elements based on what you want the browser to recommend. On top of that different browsers might use different attributes are various things. I would recommend this resource.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
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 building a small search app using Elasticsearch and AngularJS. I'm using AngularJS UI bootstrap typeahead to implement autocomplete and I'm using ES's edge_n_grams and highlight object to 1) generate the suggestions and 2) highlight the suggestions, respectively. ES highlight object wraps the suggestions in HTML <em></em> tags... which seems to be causing some issues with how I have things setup.
1) When I press Enter key instead of clicking on the search button - all that happens is the search terms are displayed wrapped in the <em></em> tags AND no search is performed... <em>search terms</em>
2) When I select a suggestion with the mouse, same thing happens.
The only time search performs is when I type a query in and click the search button...
Here is the search form that I'm using, I have ng-submit="search()" on the form element and on the button, not sure where I'm going wrong......?
<form name="q" ng-submit="search()" class="navbar-form" id="results-search" role="search">
<div class="input-group">
<input type="text" name="q" ng-model="searchTerms" class="form-control input-md" placeholder="{{ searchTerms }}" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)">
<div class="input-group-btn">
<button type="submit" ng-submit="search()" class="btn btn-primary btn-md"><i class="fa fa-search fa-lg"></i></button>
</div>
</div>
</form>
Am I doing something wrong with the UI Bootstrap Typeahead?
More clarification
So basically what I'm asking is how do I get the tags stripped from the suggestions, on selection and for searching?
Similar kind of example already asked in Stackoverflow: Click here
AngularJS disables (cannot submit) forms that do not have a specific action set:
<form action="">
when you create a controller. It does not have this issue when creating directive or factories.
You can see this in a plunk here:
http://plnkr.co/edit/gWFRMKGO3FzZtOgs4VmW?p=preview
Form is defined as:
<form action="" method="post">
If you delete the starting on line 6, you will be able to submit the form.
A simple solution is to define the action, but I'd rather not do this, as it is not necessary.
UPDATE
Some details can be found here on trying to get this change in Angular:
https://github.com/angular/angular.js/pull/3776
You can use ng-submit to handle that.
<form ng-submit="submitForm()" method="post">
<input name="test" value="11111111" />
<button type="submit" name="submit" value="1">Send</button>
<input type="submit" name="submit2" value="Send2" />
</form>
That way the form will submit normally and you must actually send the data on your submitForm function (just an example name).
Here is a quick plnkr: http://plnkr.co/edit/lwWVG0CDHSGMtMU0B8Nj?p=preview
Notice that you can submit using the buttons and also by pressing enter on the field. I hope that's what you've been asking for.
Thanks
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>