I am doing a little application to enter 2D codes automatically way with a scanner when a product passed for a production line. I am looking for this data it enters, without the need to do focus on the input. So far I have...
<div class="container mt-5">
<div class="form-row">
<div class="col-4"> <label for='panel'><b>Panel</b></label> </div>
</div>
<div class="form-row">
<div class="col-4">
<input type="text" name="panel" #panel="ngModel" [(ngModel)]="bar_code" (keyup.enter)="onEnter()" class="form-control" required autofocus>
</div>
How the scanner add a enter (end of line) I used the event (keyup.enter), and this is working perfect, but the cursor must always be on the input, so if somebody clicks outside of the input, I'll lose trace of some product, until somebody clicks inside again.
Then, in the component.ts I don't have any problem, because I use a function such as the follow.
onEnter() {
console.log(this.bar_code);
//Here is the function for send to backend
this.bar_code=null; //let white the imput.
}
Related
I have the below code snippet of a text box where one enters a mobile number. How do I have a pre-set value that a user can edit from?
For example:
The country code is already set and visible to the user, the user starts by entering their network provider number.
<div class="row">
<div class="col-md-6">
<div th:class="transfer-label"> Mobile Number
</div>
</div>
<div class="col-md-6">
<div class="form-group transfer-field">
<input th:id="msdn"
class="custom-input-normal rounded-input hollow-input-light"
type="text" name="msdn"/>
</div>
</div>
</div>
you can populate input tag with value using th:value attribute.
<input th:value="${variable}"> will render <input value="variablecontent">
I am trying to replicate the outlook login form. The first session will have the user login input field and the second session will have the password input field.
<div class="contanior">
<div class="main-contanior">
<div class="logo">
<img src="login images/logo.png">
</div>
<h3>Sign in</h3>
<form class="form">
<input type="text" name="text" placeholder="Email, phone, or sykpe">
</form>
<p>No account?Create one!</p><br>
<div class="sign-in">Sign in with a security key?<br></div>
<div class="option"></div>Sign-in option<div>
<button>Next</button>
</div>
</div>
Your form should be one but just separated by div tags, hide the password part using Javascript and CSS, create a next button, make a function in js. this function has to hide the username part and then show the password part when the next button is clicked.
<button onclick="Show();">Next</button>
I'm trying to have the input fields of my form clear when a user clicks submit. There are a lot of stack overflow questions around this topic but they all have confusing, and conflicting answers.
The HTML of my form:
<form name="form.myform" validate>
<div style="margin-top:25px">
<div style="padding:10px" class="row my-input-divs">
<div class="col-9"><input name='comment' id='comment' ng-model="admin.reply" placeholder=" (Type here to send message to guest) " style="height:50px;background-color:#EFF3F6;width:100%" required style="" type="text"></div>
<div class="col-3"> <input ng-click="sendreply(admin.reply, data.conversation[0].originator,data.conversation[0].property_id)" class="my-btn" required style="width:100%;margin-top:7px" value="Send Reply" type="submit" /></div>
</div>
</div>
</form>
Within the success function when the form is submitted I have:
$('#comment').val('');
$scope.form.myform.$setPristine();
$scope.form.myform.$setUntouched();
I do add the form to the controller with $scope.form = {}; and the setPristine and setUntouched seem to be working.
This code does clear the html of in input field when the user hits submit; however, it then displays the error Please fill out this field upon being cleared.
Additionally, The code still appears bound to the model. If the user clicks submit a second time after their input has been cleared from the HTML it will submit the original input a second time.
Does anyone know the reason for this behavior?
I am trying to create an html view that shows three form fields that together collect a United States format phone number in the format (xxx) xxx-xxxx .
How can I write the css to make this happen in an app that uses css3, bootstrap, and html5 along with AngularJS?
My current attempt gets the three input field sizes correctly, but completely messes up the placement of the parens ( and ) and also messes up the placement of the dash -. The parens and dashes are placed almost all over the screen, in that they are almost in different rows, with little or no correlation to the placement of the input fields. What specific changes need to be made to the code below in order to print out the input fields in the format (xxx) xxx-xxx, given css3, html5, bootstrap, and AngularJS?
<div class="row">
<div class="col-sm-1">
(<input class="form-control" type="text" id="phonenum1" name="phonenum1" maxlength="3" size="3" ng-model="auth.resultphone.phonenum1" ng-pattern="auth.onlyNumbers" required />)
</div>
<div class="col-sm-1">
<input class="form-control" type="text" id="phonenum2" name="phonenum2" maxlength="3" size="3" ng-model="auth.resultphone.phonenum2" ng-pattern="auth.onlyNumbers" required />-
</div>
<div class="col-sm-1">
<input class="form-control" type="text" id="phonenum3" name="phonenum3" maxlength="4" size="4" ng-model="auth.resultphone.phonenum3" ng-pattern="auth.onlyNumbers" required />
</div>
</div>
Here is a print screen of what the above code is currently printing in the view:
By contrast, the correct output would put all three fields on the same line within the proper punctuation in the pattern (phonenum1) phonenum2-phonenum3
ONGOING EFFORTS:
Also, if I take #Pauli_D's advice and deviate from the OP by using the RegEx \d{3}[\-]\d{3}[\-]\d{4}, the AngularJS form validation is only partially effective. For example, typing ANYTHING into the phonenum1 input in the code below results in the view displaying the Please enter a phone number in the format 111-222-3333 warning, but the warning DOES NOT GO AWAY when you type in a number in the format 111-222-3333. Here is the code in the view for trying #Paulie_D's suggestion:
<form name="confirmForm" ng-submit="auth.confForm(confirmForm.$valid)" novalidate>
<div class="form-group">
<div class="row">
<label for="auth.resultphone.phonenum1">Cell Phone number:</label>
</div>
<div class="row">
<div class="col-sm-3">
<input class="form-control" type="text" id="phonenum1" name="phonenum1" maxlength="12" size="12" ng-model="auth.resultphone.phonenum1" ng-pattern="auth.usPhone" required />
</div>
</div>
<div class="row">
<p ng-show="confirmForm.phonenum1.$error.required && !confirmForm.phonenum1.$pristine" class="help-block">Area code of cell phone number is required.</p>
<p ng-show="!confirmForm.phonenum1.$valid && !confirmForm.phonenum1.$pristine" class="help-block">Phone number must be in the format 111-222-3333.</p>
<button type="submit" class="btn btn-primary" ng-disabled="confirmForm.$invalid" >Submit</button>
</div>
</div>
</form>
And here is the variable declaration in the service auth.js:
this.usPhone = "\d{3}[\-]\d{3}[\-]\d{4}";
The revised AngularJS code with #PaulieD gives the following print screen. Note that the Submit button is still shaded, so that the form cannot yet be submitted:
So what other changes need to be made?
As for the css alignment issue...
.col-sm-1 {
padding-right: 0;
}
input[size='3'] {
width: 75%;
min-width: 75%;
padding: 0;
display: inline;
}
http://codepen.io/anon/pen/adPrey
So I have a google map where the user selects their location, and I am trying to validate that they have selected a location, by populating a hidden input field. I was able to get it to work with a different validation engine, but now need it to work with parsley.
If the user has not selected a location, I need it to display the error message, as with all other validations. All my other validations are working, so I suspect it is something with my syntax. I am a bit confused by the parsley documentation as far as hidden input fields.
Here is my html:
<div class="col-md-6">
<!-- WIDGET GOOGLE MAP -->
<div class="widget">
<div class="widget-header" style="height: 115px;">
<h3><i class="fa fa-globe"></i> Part II: Click & drag to select your location <small>(Your actual location will never be stored or shared. It will always be randomized within a five (5) mile radius when shown to other users)</small></h3>
<em>- custom styled google map</em>
</div>
<div class="widget-content no-padding" style="height: 300px;" >
<div class="google-map">
<div id="register-map-canvas" style="height: 300px;"></div>
</div>
</div>
<div class="widget-content">
<div class="form-group">
<input type="hidden" name="homelat" id="latFld" required data-parsley-errors-container="#error-map"/> <!--the homelat input field is below the map only because it looks silly with two adjacent error messages-->
</div>
<div class="form-group">
<input type="hidden" name="homelng" id="lngFld" />
</div>
<p id="error-map"></p>
<button class="btn btn-primary btn-block" type="submit">Register</button>
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
<!-- END WIDGET GOOGLE MAP -->
</div>
So as you can see, I am trying to get the error message to pop up beneath my map within a widget box.
I populate the latFld and lngFld inputs but only validate one of them, so as to only generate one error message. But unfortunately I cannot get that one to validate. I know the fields are populating.
In the js parsley file (~line 195) you must on excluded: line put in comment or delete input[type=hidden]'
var ParsleyDefaults = {
// ### General
// Default data-namespace for DOM API
namespace: 'prsly-',
// Supported inputs by default
inputs: 'input, textarea, select',
// Excluded inputs by default
excluded: 'input[type=button], input[type=submit], input[type=reset]',
//input[type=hidden]',