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);
Related
I have a WordPress website with a bar at the top that I can add custom code to.
I'm trying to add an Infusionsoft email signup form to this bar and I want everything to be on the same line. Currently it's showing the field label on the first line, then the email field on the second line and then the submit button on the third line.
I can add whatever code I need to this form and this custom code box and I can also add custom CSS to the theme options themselves.
I've tried a bunch of things and some of them almost work but I can't figure this out.
Any help would be greatly appreciated.
Here's my form code:
<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field">
<label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text">
</div>
<div>
<div> </div>
</div>
<div class="infusion-submit">
<button type="submit">Submit</button>
</div>
I moved the infusion submit div inside the infusion field div. I used display flex and flex-direction row to achieve them on the same row.
I know you're using word press and probably just copy and pasting code. If you plan to do web design work it would be well worth it to study up on HTML and CSS. It's actually not that complicated and you'll have so much control over how things look on your site!
*Edit to center content
<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field" style="display:flex; flex-direction: row; justify-content: center;">
<label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" style="margin-right: 10px;">
<div class="infusion-submit">
<button type="submit">Submit</button>
</div>
</div>
</form>
I have this link which pass the parameter.
Malvenfroh City <br>
But I want that this whole thing is a button but in this case it doesnt work, why?:
<form action="?spalte=7">
<input type="submit" value="Malvenfroh City">
</form>
Have someone another solution ?
You can simply pass the parameters as a hidden input inside the form, here is an example:
<form action="#" method="get">
<input type="hidden" name="spalte" value="7">
<input type="submit" value="submit">
</form>
I hope this helps.
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>
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
I have one input field that submits on pressing enter, like so:
<form action="" method="POST" >
<input type="text" name="name"/>
<input type="submit" style="display:none;" />
</form>
But when I add another field, pressing enter doesn't do anything:
<form action="" method="POST" >
<input type="text" name="name"/>
<input type="text" name="message"/>
<input type="submit" style="display:none;" />
</form>
Why not? How can this be resolved?
Thanks a lot!
I wouldn't use display:none.
I think you wanted visibility: hidden.
At any rate, I wouldn't use either. If you do not want a submit button I would first moved those / after the input names one space to the right and then use a hack suggested on SO.
<form action="index.php" method="POST" >
<input type="text" name="name" />
<input type="text" name="message" />
<input type="submit" style="position: absolute; left: -9999px;
width: 1px; height: 1px;"/>
</form>
Also, please check out this Question as it has some great Answers on it.
Submitting a form by pressing enter without a submit button