What I would like to do is make all fields show their validation errors when:
visiting and modifying a field so that its dirty state is triggered (the default), and also
validating and triggering dirty when the submit is pressed
Take the following form
<div ng-form="MyForm">
<label>
<input type="text" name="numbers" ng-required="'true'" ng-pattern="/^[0-9]*$/" ng-model="numbers" />
<span class="error" ng-show="numbers.$error.required">Required</span>
<span class="error" ng-show="numbers.$error.pattern">Pattern</span>
</label>
<label>
<input type="text" name="characters" ng-required="'true'" ng-pattern="/^[a-z]*$/" ng-model="characters" />
<span class="error" ng-show="characters.$error.required">Required</span>
<span class="error" ng-show="characters.$error.required">Pattern</span>
</label>
<button ng-click="validateAndSubmit()">Submit</button>
</div>
Essentially, I would like to create a directive that validates (sets dirty to true) for all the controls in an arbitrary form. Is there a simple way to get the form controls from the FormController without finding the actual dom elements?
Related
i've been searching for this and couldn't find any answers specific for my need:
I have a really big form, which i want to slice in components. My form looks like this:
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<div ngModelGroup="someInfo">
<input type="text" ngModel>
<input type="text" ngModel>
</div>
<div ngModelGroup="someOtherInfo">
<input type="text" ngModel>
<select ngModel>SomeOptions</select>
</div>
</form
I want to create separate components for these groups so when i check form.value it sees the groups, something like this:
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<some-info-component ngModelGroup="someInfo"></some-info-component>
<some-other-info-component ngModelGroup="someOtherInfo"></some-other-info-component>
</form>
so how do i make this work, when i try to access form.value.someInfo it is empty object, i've tried with ControlValueAccessor but it only works when i give these components [ngModel] but not with ngModelGroup
I'm trying to force a <label/> and its <input/> to stay on the same line.
I'm using the form-control class to make the <input/> pretty. However, when I do so, it REALLY wants to put itself on a separate line. I'm avoiding using rows and columns because I want the label right next to the textbox, not to move around depending on the size of the screen.
<div>
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
I want this:
Search [______________________]
I get this:
Search
[_____________________]
How do I force them to stay on the same line?
http://embed.plnkr.co/qA2s5RGRpvfRa7rhiq1n/preview
What you are looking for is referred by Bootstrap as an inline form or horizontal form.
<form class="form-inline" role="form">
<div class="form-group">
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
</form>
Make sure your form has the form-inline class on it and realistically they should be wrapped in a form-group. The inline form make everything in one line.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Search</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</form>
When using form-horizontal, the form-group acts like a row, so you can move content to separate lines :) With that, you would need to use grid properties so the label/input is properly aligned.
I am creating a form that requires the user to input their name and email address. The first line of the form has two inputs side by side for each part of the name and the 2nd line has one input for the email address that should be the same width as the first line combined. I'm trying to use the fluid grid system but can't line up the 2nd row with the first.
<form action="/subscriptions" method="post">
<fieldset>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls row-fluid">
<input class="span2" id="first_name" name="first_name" placeholder="First" required="required" type="text">
<input class="span2" id="last_name" name="last_name" placeholder="Last" required="required" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls row-fluid">
<input class="span4" id="email" name="email" type="email">
</div>
</div>
</fieldset>
</form>
http://jsfiddle.net/sguha095/v4amX/
Have a look a this jdfiddle: http://jsfiddle.net/kY5LL/18/
I added some div.row-fluid containers per row of your form and one extra set of inputs for demonstration.
Hope this is what you were looking for.
First we need to clean up the HTML a bit, there is an extra closing div on the first line.
I just added some classes to improve the styling so you could see how it works. The input-block-level class is a bootstrap mixin to force inputs to act like true block level elements. That's needed if you want this to be clean and to leverage the benefits of CSS. If you want to do all of your styling with HTML, then you can do so with more markup and less semantic methods, but I would recommend against it.
Hope this helps!
http://jsfiddle.net/kY5LL/12/
I will like to translate this full code into a zend form with all the ids, html image elements, the classes, the spans. Everything. Am finding it difficult to add the image and to group the elements accordint to the divs and spans.
I will be grateful if anyone could help me. Thank you.
<form method="get" action="/search" name="searchForm" id="searchForm">
<div class="logo">
<a href="http://trial.com" title="Trial" name="trialLogo">
<img width="205" height="40" alt="Trial Search" src="..image/logo.png">
</a>
</div>
<input type="hidden" value="/Listing" name="ref_uri">
<div class="inputBlock">
<span class="inputWrapper"><input type="text" class="labelMagic fieldHelpText" tabindex="3" id="what" name="what" autocomplete="off"><input type="hidden" name="listingId"></span>
</div>
<div class="inputBlock">
<span class="inputWrapper"><input type="text" autocomplete="off" value="Location" class="labelMagic" tabindex="4" id="where" name="where"><input type="hidden" name="geoId"></span>
</div>
<div class="submitWrapper"><button class="goButton" tabindex="5" name="go" type="submit">Go!</button>
</div>
</form>
You could certainly employ a collection of configured HtmlTag decorators to perform all this wrapping, including setting the attributes on all these divs and spans.
But perhaps easier would be to simply employ a ViewScript decorator for the form. A good example appears on this MWOP Dev Zone article.
This question already has an answer here:
Closed 12 years ago.
Possible Duplicate:
Need to change smarty file into zend file
Hi I have a one tpl file with the name of login.tpl in smarty..so now i need to create a form like login.php and ini file for this form in zend framework..
here is the example code..so need to convert to form and ini file for this in zend..
/* login.tpl file */
<div id="add-user-form" class="form">
<form action="/account/login" method="post">
{{input_text type="hidden" name="redirect_url" value=$smarty.server.REDIRECT_URL|default:"/"}}
<div class="contain">
<div class="fieldgrp">
<label> </label>
<div class="field"><p><h3>Enter User Credentials</h3></p></div>
</div>
<div class="fieldgrp">
<label for="login_name">Username </label>
<div class="field">{{input_text name="login" id="login_name" class="longfield" maxlength="100"}}</div>
</div>
<div class="fieldgrp">
<label for="login_password">Password </label>
<div class="field">{{input_text type="password" name="password" id="login_password" class="longfield" maxlength="100"}}</div>
</div>
<div class="fieldgrp">
<label> </label>
<div class="field"><input type="submit" value="Login" /></div>
</div>
</div>
</form>
</div>
You have a couple of options:
create a Zend_Form element and assign decorators to get the output you want
create a Zend_Form element and render it using the view script decorator to duplicate the layout of the form (easier then no. 1 but the level of reuse is low)
create the form using plain old html (you loose automatic rendering of errors, and need to output the value of each element manually)
use Smarty as your View in Zend Framework (it has the same cons as the option no.3)
Whichever path you choose you will have to get your hands dirty and learn something new. ZF documentation is a place to start. But be warned, Zend_Form is not for the faint of heart :)