I have a form where every required field turns red if the user clicks and blur the field without writing anything on the field, the problem comes with this date picker
<mat-form-field class="contenedorFecha" appearance="outline" color="accent">
<mat-label>Fecha plantación</mat-label>
<input matInput [matDatepicker]="fechaPlantacion" formControlName="fechaPlantacion" readonly (click)="fechaPlantacion.open()">
<div matSuffix style="display:flex; align-items: center">
<mat-datepicker-toggle [for]="fechaPlantacion"></mat-datepicker-toggle>
<button mat-icon-button (click)="deleteDate('fechaPlantacion', $event)" [disableRipple]="true"
*ngIf="fincaForm.get('fechaPlantacion').value !== null">
<mat-icon class="nav-link-icon mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">close</mat-icon>
</button>
</div>
<mat-datepicker #fechaPlantacion></mat-datepicker>
</mat-form-field>
When I click on the input it opens the matDatePicker, but as it opens the date picker the input blurs, so the input changes to red, any way to prevent this? I've tried with css but the problem is I want the input to be red but only when it should
Yes the problem is because the focus gets out of the input control and goes to the calendar. If you are only using the default button as the trigger to open the date picker, then you won't encounter this issue. But like what you did, sometimes it's better to add that (focus) or (click) trigger. I can only think of one work around.
Start by removing the initial validators from your field. Then put a handler whenever the material date picker was closed such as:
<mat-datepicker #fechaPlantacion (closed)="close()"></mat-datepicker>
and in the close method, you have to set the validators dynamically:
close() {
this.fechaPlantacion.setValidators(Validators.required);
this.fechaPlantacion.updateValueAndValidity(null);
}
This way, the validation will only be added after the selection (or not selecting anything) from the dates in the calendar. I also tried using readonly input and still working fine after testing in my local machine.
Related
The value I am displaying if the value of ngModel but the thing is everytime I selct new date on the calendar or update the new date it refreshes the ngmodel and data took like 2-3 seconds before its show , want I want is just it should not blink like on the recording below , it show always display . Any idea guys that might help ?
the ngmodel value should not refresh if there are no value changes
#recording
#html code
<td >
<div style="width:110px;" fxLayout="row" fxLayoutAlign="center center">
<input
(click)="openPicker(pickerTargetDate);"
([ngModel])="data.targetDate"
class="entitlements-body-picker-font"
(dateChange)="dateChange(targetDate')"
[matDatepicker]="pickerTargetDate">
<mat-datepicker #pickerTargetDate></mat-datepicker>
<mat-icon class="date-icon" (click)="openPicker(pickerTargetDate);">calendar_today
</mat-icon>
</div>
</td>
I want to give the user feedback on, for example (but not limited to) the validity of an email field as the user types, i.e. client-side validation.
<div class="form-group">
<label for="email">Email</label>
<div :class="['input-group', validateEmail()]">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<input type="text" v-model="email" placeholder="joe#example.org" class="form-control">
</div>
Before the user types anything, I'd like the field to be uncolored. As she types, the outline becomes red until she has put in a properly formatted email, at which point the outline becomes green. All other input fields should be unaffected by this. Another example might be the password field that becomes green as the requirements/constraints are met.
In bootstrap 3 it was pretty simple to add a has-error or has-success class to an input field via a javascript method per this example https://codepen.io/CSWApps/pen/MmpBjV.
However, it seems that in bootstrap-4 with the shift to HTML5 pseudo-classes :is-valid and :is-invalid it has become a lot more complicated with the necessity to add was-validated or needs-validation to the form tag, and the difficulty in setting those pseudo-classes on a single field via javascript. Am I missing something? Is there a simple way to replicate the bootstrap-3 functionality?
In Bootstrap 4, you can use .is-invalid and .is-valid classes on .form-control to manually indicate the form fields validity
https://getbootstrap.com/docs/4.3/components/forms/#server-side
Codepen demo
Why datepicker-popup doesn't work if the input is disabled? And how can I let it work?
Code:
span.input-group
input.form-control(
type="text"
name="accountDate"
ng-model="account.date"
min-date="minDate"
max-date="maxDate"
datepicker-options="dateOptions"
ng-disabled="true"
uib-datepicker-popup="{{format}}"
is-open="date.isOpen"
close-text="Close"
close-on-date-selection="true"
show-button-bar="false"
)
span.input-group-btn
button.btn.btn-default(
type="button"
ng-click="openDatePicker()")
i.glyphicon.glyphicon-calendar
If I remove ng-disabled it works as expected. I tried to replace it with disabled and disabled="disabled"... not working at all.
I need it to be disabled and if I click on the button it should display the date picker...
A disabled input element is unusable and un-clickable. Source.
Try to use ng-readonly instead ng-disabled.
A workaround or hack is to place ng-hide on the div you want to add functionality to and declare a boolean in js file having value of true by default. User clicks on the button and that method should change the value of boolean to false. Hope this helps!
In the datepicker documentation there is an example of the popup calendar being controlled programatically by using the open() and close() methods like so:
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>
One can also set the opened property to true/false like so:
<button mat-raised-button (click)="picker.opened = true">Open</button>
I wonder if there is anyway to use this to get the calendar popup to stay permanently opened for the purpose of letting the user click around on different dates, and having those selection reflected in the input?
I guess you can try this :
<mat-form-field class="example-full-width">
<input matInput (dateChange)="reOpenCalendar()" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>
in your component ts/js file you need to declare a new method :
export class YourComponent{
#ViewChild('picker') picker;
//....
reOpenCalendar(){
let self = this;
setTimeout(
()=>{
self.picker.open();
},
50
);
}
}
This will introduce a flash effect as the date picker disappears and quickly reappears.
The other solution would be fork angular material datepicker component in your local project and introduce an Input property to disable the closing when a date is selected
The built-in datepicker control of Material library comes with an internal Calendar component. You can use the following to have a calendar that is always open (without the input box but still works with date/month/year selection)
Read more about the calendar here:
https://onthecode.co.uk/angular-material-calendar-component/
I have created below search bar component which interacts with API every time a key is pressed.
<div class="fill-remaining-space">
<md-input-container class="example-full-width" color="accent">
<md-icon mdPrefix>search</md-icon>
<input type="text" mdInput #input (keyup)="search(input)">
<md-icon mdSuffix *ngIf="input.value.length > 0" (click)="input.value=''">clear</md-icon>
</md-input-container>
</div>
Now I am getting results array in my component.ts file. I want to show a dropdown below this search bar when results are fetched from db.
I tried doing multiple things like applying *ngIf on list. but all in vain.
Is there any simple solution which can allow me to show a dropdown list after I start typings characters in search box input?
Thanks in advance.