I have two input fields.
HTML:
<mat-form-field class="example-form-field" >
<input matInput type="text" placeholder="First Name" name = "user_first_name" [(ngModel)]="user_first_name" required>
<button mat-button *ngIf="user_first_name" matSuffix mat-icon-button aria-label="Clear" (click)="user_first_name=''">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field class="example-form-field">
<input matInput type="text" placeholder="Last Name" name = "user_last_name" [(ngModel)]="user_last_name" required>
<button mat-button *ngIf="user_last_name" matSuffix mat-icon-button aria-label="Clear" (click)="user_last_name=''">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
Here is my requirements for input validation.
if the user enters anything starts with these "#!#$%^7*().,;:'"'/?=-+][{}\|" I want to display a message like Please enter valid data.
If the user is not entering anything in inputs I want to display like "First Name is required".
How can I achieve this.
Related
I have used angular material to make login form. The text input field works properly, but the password field doesn't render properly in Internet Explorer 11.
Screenshot:
enter image description here
Here is the code:
<mat-form-field class="feild-full-width" color="primary">
<input matInput type="text" placeholder="Username"
autocomplete="off" />
</mat-form-field>
<mat-form-field class="feild-full-width" color="primary">
<input matInput placeholder="Password" autocomplete="off" [type]="texttype ? 'password' : 'text'" />
<mat-icon matSuffix (click)="texttype = !texttype">{{texttype ? 'visibility_off' : 'visibility'}}</mat-icon>
</mat-form-field>
How to fix it?
I try to use in my project only flex-layout and avoid vanilla css. I cannot figure out how to center hohorizontally angular material stepper and get good view. I check margin: 0 auto; and it works properly. Here is my code:
<mat-vertical-stepper [linear]="true" #stepper fxLayoutAlign="center center" fxLayout="column">
<mat-step>
<form>
<ng-template matStepLabel>
Fill out ballot name
</ng-template>
<mat-form-field>
<input matInput placeholder="Ballot name">
</mat-form-field>
<div>
<button mat-flat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form fxLayout="column">
<ng-template matStepLabel>
Select start and end time
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="pickerStart" placeholder="Choose a start date">
<mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle>
<mat-datepicker #pickerStart></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="pickerEnd" placeholder="Choose a end date">
<mat-datepicker-toggle matSuffix [for]="pickerEnd"></mat-datepicker-toggle>
<mat-datepicker #pickerEnd></mat-datepicker>
</mat-form-field>
<div fxLayoutGap="5px">
<button mat-flat-button matStepperPrevious>Back</button>
<button mat-flat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form>
<ng-template matStepLabel>
Enter a description of ballot
</ng-template>
<mat-form-field>
<textarea matInput placeholder="Description"></textarea>
</mat-form-field>
<div fxLayoutGap="5px">
<button mat-flat-button matStepperPrevious>Back</button>
<button mat-flat-button (click)="stepper.reset()">Reset</button>
<button mat-flat-button>Confirm</button>
</div>
</form>
</mat-step>
</mat-vertical-stepper>
Screenshot of the problem:
Each step is a different width, so the result you see is expected. When you horizontally center vertically stacked elements, wider elements will appear outside narrower elements. What you want is to center the whole stepper, and leave the steps left aligned:
<div fxLayoutAlign="center center" fxLayout="column">
<mat-vertical-stepper [linear]="true" #stepper>
...
</mat-vertical-stepper>
</div>
StackBlitz
I am using the following html for feeding user name and on losing the focus want the email input field to fill up with username + '#gmail.com'. But the Value setting is not giving the desired result.
HTML code is
<div class="form-group" >
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="name" onfocusout= "seteMail(this)" class="form-control" placeholder="Enter Personal Number as User Name" maxlength="7" value="<?php echo $name ?>" required/>
<span class="text-danger"><?php echo $nameError; ?></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" name="email" class="form-control" placeholder="Enter AFNET eMail ID" maxlength="40" value="<?php echo $email ?>" required/>
<span class="text-danger"><?php echo $emailError; ?></span>
</div>
</div>
javascript is
function seteMail(thisvalue) {
// window.alert(thisvalue.value);
var tempval = thisvalue.value.toString()+'#gmail.com';
$('#email').val(tempval);
$('#email').html(tempval);
};
<input> is an input field and can never be set externally as it takes input only from the Standard Input that is Keyboard.
I have realised this after lots of H&T Method (H&TM).
Can you please tell me how to add text field in front of label in jquery mobile .
There is two different types of text field in this image.How to implement this?
Just you have to copy simple code to your website...
For input box:-
<div data-role="fieldcontain">
<label for="text-12">Text input:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
For textarea:-
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
Keep that in mind the value of for="" and id="" of input box should be same...
For more details check out:- http://view.jquerymobile.com/1.3.1/demos/widgets/textinputs/
Use this code to add textfield
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
Ref this docs to know more informations about JQM
http://jquerymobile.com/demos/1.2.1/docs/forms/textinputs/
Jquery Mobile nicely lays out controls in a grid. I would the text "12345678" outlined in red in the image below to sit right above the textbox and left aligned. I can't see how to do it.
The image was generated with this jsfiddle: http://jsfiddle.net/958Gr/3/
By setting disabled='true' and value="12345678" you can get something decent. The account number will still show as as field, but then you can theme it differently. See this fiddle:
http://jsfiddle.net/den232/7hmYn/
Good Luck!
<div class="ui-body ui-body-b">
<div data-role="fieldcontain" data-theme='c'>
<label for="Phone" >Account ID</label>
<input id="Phone" name="Phone" type="text" disabled='true' value="12345678" />
</div></div>
<div class="ui-body ui-body-c">
<div data-role="fieldcontain">
<label for="Email">Email Address</label>
<input data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" type="text" value="" />
</div> </div>
<div class="ui-bar ui-bar-c">
<div data-role="fieldcontain">
<label for="Email">Email Address</label>
<input data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" type="text" value="" />
</div> </div>
You may Use Two-column grids as in this updated jsfiddle:link