Using Flat-ui with a form that contains some radio inputs which changes the format from standard bootstrap <input type="radio"... format to the following:
<label class="radio">
<input type="radio" name="group1" value="1" data-toggle="radio">
Radio is off
</label>
<label class="radio">
<input type="radio" name="group1" value="2" data-toggle="radio" checked>
Radio is on
</label>
The problem is when I use AngularJS to process the form the values are not being stored in the associated object:
<label class="radio">
<input type="radio" name="group1" value="1" data-toggle="radio" data-ng-model="regForm.accountType">
Radio is off
</label>
<label class="radio">
<input type="radio" name="group1" value="2" data-toggle="radio" data-ng-model="regForm.accountType">
Radio is on
</label>
As an aside: The radios' images are not appearing until after they are toggled? Has anyone else has this problem with flat-ui's kit?
Here is solution for this problem.
https://gist.github.com/petehamilton/5993366
Another solution is to don't preventDefault event
https://github.com/designmodo/Flat-UI/issues/57
Related
I have an Input box inside a form object with NgForm directive.
I have created a custom directive separately.
Just want to pass the NgForm object to my custom directive.
My html:
<form name="myForm" #myForm="ngForm" custValidate novalidate>
<input type="text" name="email" custValidate="emailValidate" class="form-control" ngModel required>
<input type="text" name="firstname" custValidate="nameValidate" class="form-control" ngModel required>
<button type="submit"></button>
</form>
The console is coming as string only. I want it to be the NgForm object.
Its a requirement so cannot add ngSubmit function in the compponent as shown in the official docs (https://angular.io/api/forms/NgForm);
how can I turn off autosuggestion strip above the mobile keyboard in Ionic?
I've already tried:
<input type="text" name="username" id="username"
class="form-control" placeholder="Enter your user name"
value=""
autocapitalize="off"
autocomplete="off"
spellcheck="false"
autocorrect="off" />
but none of these works.
The same problem persists for <ion-input>.
I'm trying to create 2 buttons, power on and power off, that have click events for their respected statuses. I have them as radio buttons, but i wanted them to be submitted on click without a submit button, like a switch. So i decide to just have them as pseudo forms, and add click listeners to each to release the event data.
I was testing this by logging the click, and when i click on, the console logs 2 clicks, despite clicking it once.
component snippet
onClick(data: any) {
console.log('click');
}
html snippet
<div class="btn-group" data-toggle="buttons">
<label
class="power-toggle on btn btn-lg btn-success"
(click)="onClick($event)"
>
<input type="radio" name="power" value="power-on" autocomplete="off">
ON
</label>
<label
class="power-toggle off btn btn-lg btn-danger active"
(click)="onClick('off')"
>
<input type="radio" name="power" value="power-off" autocomplete="off" checked>
OFF
</label>
</div>
why is this happening? how can i fix it? is there a way to submit the radio value as is without a submit button or turning the button into a submit button?
You need to bind the click function to the input and not the label.
Please find the plunker example here : https://plnkr.co/edit/Fmhs8xQupAynJfmwtk5y
<div class="btn-group" data-toggle="buttons">
<label
class="power-toggle on btn btn-lg btn-success"
>
<input (click)="onClick($event)" type="radio" name="power" value="power-on" autocomplete="off">
ON
</label>
<label
class="power-toggle off btn btn-lg btn-danger active"
>
<input (click)="onClick('off')" type="radio" name="power" value="power-off" autocomplete="off" checked>
OFF
</label>
</div>
I was looking how a bootstrap form looks like, And I saw something that looks pretty much like this:
<div class="form-group">
<label for="inputA">Some Input:</label>
<input type="text" name="Input" id="inputA" class="form-control">
</div>
And it's really bothers me to do the for attribute every time. so, my question is, Is it possible to do somethig like this?:
<label class="form-group">
<span>Some Input:</span>
<input type="text" name="Input" id="inputA" class="form-control">
</label>
And is there any possible issues working this way?
The for simply toggles the control for the form input. Essentially, when you click the label, the form element is focused upon, or selected, depending on what type of form element it is. You do not have to include the for on each label; however, this is just common practice. I would not swap the label for a span though, I would simply do this...
<div class="form-group">
<label class="col-sm-2 control-label">Your Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="foo">
</div>
</div>
In XHTML I know that this is correct for a checked radion button:
<input type="radio" checked="checked" name="bar" value="baz" />
And absence of the checked attribute means that the radio button is unchecked:
<input type="radio" name="bar" value="baz" />
But would this be correct for unchecked radio button as well:
<input type="radio" checked="" name="bar" value="baz" />
No actually using
<input type="radio" checked="" name="bar" value="baz" />
will also render the checkbox checked in the browsers i've seen (how strange it might look)!