Angular 5 + materializecss Form reset - materialize

I have a form for adding new users and I am having problems with the form reset because it does not remove the valid class of materialize.
The form:
<div class="col s12 m12 l4 xl4">
<form (ngSubmit)="onSubmit(); newLabMember.reset()" #newLabMember="ngForm" ngNativeValidate>
<!-- New lab member form -->
<div class="section">
<h5>Add lab member</h5>
<div class="input-field">
<input type="text" name="firstName" [(ngModel)]="user.firstname" class="validate" id="firstName" validate required>
<label for="firstName">First name</label>
</div>
<div class="input-field">
<input type="text" name="lastName" [(ngModel)]="user.lastname" class="validate" id="lastName" validate required>
<label for="firstName">Last name</label>
</div>
<div class="input-field">
<input type="text" name="email" [(ngModel)]="user.email" class="validate" id="email" validate required>
<label for="email">Member email</label>
</div>
<blockquote>An email will be sent to the new user with a password and further instructions.
</blockquote>
<div class="input-field">
<button type="submit" class="waves-effect waves-light btn blue-grey darken-1">Add new member</button>
</div>
</div>
</form>
</div>
As you can see, when I submit the form I use reset() form but the class .valid from materialize still there.

Related

Control alignment input-group-btn

I am trying to put on same line firstname,lastname inputs and button.
The total width of the above 3, should be equal to the 'xxxxxxx' input.
you can find the code here
http://jsfiddle.net/zxb53wjq/1/
<div class="container">
<form role="form" action="" method="post">
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<div class="form-group">
<input maxlength="200" type="text" class="form-control" placeholder="xxxxxxxx"/>
</div>
<div class="form-group">
<label class="control-label">Application:</label>
<div class="input-group">
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="last name" name="lastname" type="text" />
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
using bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Bootstrap 4 is not the same as bootstrap 3. Most of the classes have been renamed and unlike bootstrap 3, bootstrap 4 uses flex box.
Bootstrap 4
Remove the two inputs' inline styles
Use input-group-append instead of input-group-btn.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<input class="form-control " placeholder="last name" name="lastname" type="text" />
<div class="input-group-append">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</div>
</div>
http://jsfiddle.net/fhg3qx96/
Bootstrap 3
Use input-group-btn inside input-group
<div class="input-group mb-3">
<input class="form-control" style="width:50%" placeholder="first name" name="firstname" type="text" />
<input class="form-control" style="width:50%" placeholder="last name" name="lastname" type="text" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
https://codepen.io/anon/pen/dQrJeW

Can I use bootstrap form class outside form tag

This question is about best practice. Can I use form-horizontal class on a <div> element. I am trying to use style that these form class provides but I don't want to use form tag.
Is it good practice ?
<div class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</div>

How to create 2 column form using bootstrap 3

I have created form using bootstrap 3. how can I make a 2 column form. that is the label on the left and the input, drop down box etc on the right
<fieldset>
<div class="form-group">
<label for="exampleInputProject">Map info</label>
<input type="text" class="form-control" id="exampleInput" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Class</label>
<input type="text" class="form-control" id="exampleInputTeam" placeholder="Team Project information">
</div>
<div class="form-group">
<label for="exampleInputProject"> info</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Build Defintion">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="exampleInputPassword1">Name</label>
<input type="text" class="form-control" id="exampleInputTeam" placeholder="Build Def Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control" id="exampleInputTeam" placeholder="Config Location">
</div>
</fieldset>
by adding <div class="col-md-6"> surrounding the two fieldsets
<div class="row">
<div class="col-md-6">
<fieldset>
...
</fielset>
</div>
<div class="col-md-6">
<fieldset>
...
</fielset>
</div>
</div>
http://www.bootply.com/JziKUuxQYM

How to get widget data in POST method of form submission?

I have widget called List builder, which i used to sort list of contacts.
when i submit the form the, i should get these sorted list of contacts in my $_POST array.
I am getting the content from CGridview widget but not from the following widget:
$this->widget('ext.widgets.multiselects.XMultiSelects',array(
'leftTitle'=>'Email',
'leftName'=>'Contactlist[email][]',
'leftList'=>Contactlist::model()->findUsersByemail( ),
'rightTitle'=>'Email-List',
'rightName'=>'Contactlist[email][]',
//'rightList'=>Contactlist::model()->findUsersByemail( ),
'rightList'=>array(),
'size'=>20,
'width'=>'200px',
));
How to submit this widget data, so that i can access it from $_POST array?
Here is the code generated by this widget:
<form id="yw0" action="/amantran/index.php?r=invmgmt/contactlist/admin" method="get">
<div class="row">
<label for="Contactlist_econtact">Econtact</label> <input size="10" maxlength="10" name="Contactlist[econtact]" id="Contactlist_econtact" type="text" /> </div>
<div class="row">
<label for="Contactlist_fname">Fname</label> <input size="40" maxlength="40" name="Contactlist[fname]" id="Contactlist_fname" type="text" /> </div>
<div class="row">
<label for="Contactlist_lname">Lname</label> <input size="25" maxlength="25" name="Contactlist[lname]" id="Contactlist_lname" type="text" /> </div>
<div class="row">
<label for="Contactlist_email">Email</label> <input size="50" maxlength="50" name="Contactlist[email]" id="Contactlist_email" type="text" /> </div>
<div class="row">
<label for="Contactlist_mobile">Mobile</label> <input size="10" maxlength="10" name="Contactlist[mobile]" id="Contactlist_mobile" type="text" /> </div>
<div class="row">
<label for="Contactlist_address">Address</label> <input size="50" maxlength="50" name="Contactlist[address]" id="Contactlist_address" type="text" /> </div>
<div class="row buttons">
<input type="submit" name="yt0" value="Search" /> </div>
You are having method="get" in your form, change it to method="post"

Twitter Bootstrap presents two different ways in two different Rails 3.2 projects

I am using SimpleForm and Twitter Bootstrap in two Rails 3.2 projects. Unfortunately, my forms are not rendering properly in one of the projects.
All relevant gems are the same versions.
The one that is presenting correctly has fields that look like this:
<form id="new_user" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/users" accept-charset="UTF-8" name="new_user">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8"> <input type="hidden" value="I/WorRCjNpv7gnccGkL6/LETTgn6ao6Ycrgm0ky2slM=" name="authenticity_token">
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label>
<div class="controls">
<input id="user_first_name" class="string required" type="text" size="50" name="user[first_name]">
</div>
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label>
<div class="controls">
<input id="user_last_name" class="string required" type="text" size="50" name="user[last_name]">
</div>
</div>
<div class="control-group email required">
<label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label>
<div class="controls">
<input id="user_email" class="string email required" type="email" size="50" name="user[email]">
</div>
</div>
<div class="control-group password required">
<label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label>
<div class="controls">
<input id="user_password" class="password required" type="password" size="50" name="user[password]">
</div>
</div>
<div class="control-group password optional">
<label class="password optional control-label" for="user_password_confirmation">Password confirmation</label>
<div class="controls">
<input id="user_password_confirmation" class="password optional" type="password" size="50" name="user[password_confirmation]">
</div>
</div>
<div class="control-group boolean optional">
<label class="boolean optional control-label" for="user_admin">Admin</label>
<div class="controls">
<input type="hidden" value="0" name="user[admin]"> <label class="checkbox"><input id="user_admin" class="boolean optional" type="checkbox" value="1" name="user[admin]"></label>
</div>
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_company"><abbr title="required">*</abbr> Company</label>
<div class="controls">
<input id="user_company" class="string required" type="text" size="50" name="user[company]">
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Create User" name="commit"> <a class="btn" href="/users"><span class="translation_missing" title="translation missing: en.helpers.links.cancel">Cancel</span></a>
</div>
</form>
while the one that is not correct gets rendered like this:
<form id="new_user" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/users" accept-charset="UTF-8" name="new_user">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8"> <input type="hidden" value="TR4q4W8cEl82hI6+bebVsoYp8WD3k2xsyhhf1UXzCYg=" name="authenticity_token">
</div>
<div class="input string required">
<label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label> <input id="user_first_name" class="string required" type="text" size="50" name="user[first_name]">
</div>
<div class="input string required">
<label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label> <input id="user_last_name" class="string required" type="text" size="50" name="user[last_name]">
</div>
<div class="input email required">
<label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label> <input id="user_email" class="string email required" type="email" size="50" name="user[email]">
</div>
<div class="input password required">
<label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label> <input id="user_password" class="password required" type="password" size="50" name="user[password]">
</div>
<div class="input password optional">
<label class="password optional control-label" for="user_password_confirmation">Password confirmation</label> <input id="user_password_confirmation" class="password optional" type="password" size="50" name="user[password_confirmation]">
</div>
<div class="input boolean optional">
<input type="hidden" value="0" name="user[admin]"> <label class="boolean optional control-label checkbox" for="user_admin"><input id="user_admin" class="boolean optional" type="checkbox" value="1" name="user[admin]"> Admin</label>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Create User" name="commit"> <a class="btn" href="/users"><span class="translation_missing" title="translation missing: en.helpers.links.cancel">Cancel</span></a>
</div>
</form>
I have followed the identical steps (as far as I know) on both projects. Why is Twitter Bootstrap causing the two to render differently? Or is it SimpleForm?
I found the problem, although I'm still not sure why it happened. This was indeed a SimpleForm problem rather than a Twitter Bootstrap problem.
The config/initializers/simple_form.rb files were generated differently between the two. I am not sure why.
I did get some errors during installation that were thrown by MiniTest.
Looks like the problem is with simple form.
Twitter Bootstrap only handles the style, SimpleForm generates the html.
Are you sure, that you're using the same version of SimpleForm on both projects? Or maybe you forgot to call simple_form_for on the later one.
EDIT:
After the installation did you ran the twitter bootstrap generator?
rails generate simple_form:install --bootstrap