Angular 2 additional custom access parameters
I am creating an application using angular2.
I need to get the date from user input using a calendar, but I need to put a mask on the user input to stay in this dd-mm-YYYY format when it prints.
I am using two different modules which I got from ng-bootstrap and angular2-text-mark website
<input [textMask]="{mask: mask}" type="text" class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker">
When I use textMask and ngbDatepicker on the same tag I get this error
ERROR: More than one custom value attribute matches a form control with an undefined name attribute.
Is there a way to do things like this?
thank
source to share
He has no solution until today. Here's what I did to still be able to use MASKED INPUT and NGB DATEPICKER. I created two inputs, one with a masked input, the other with a sensor. Whenever the value changes, they both update the main object (which used to be ngModel
.
Here is the code Hope this helps someone.
<div class="input-group">
<input
type="text"
class="form-control form-control-sm"
[(ngModel)]="begin_date"
(change)="onDateInput($event.target.value)"
placeholder="dd/mm/aaaa"
[textMask]="{mask: maskedInput.date}"
>
<input
type="hidden"
(dateSelect)="onDateSelect($event)"
[(ngModel)]="object.begin"
ngbDatepicker
#dI="ngbDatepicker"
>
<div class="input-group-addon">
<button
class="btn btn-outline-secondary btn-sm"
(click)="dI.toggle()"
type="button"
>
<i
class="fa fa-calendar"
aria-hidden="true"
></i>
</button>
</div>
</div>
source to share
Rafael, I had the same problem, my solution was set up for readable input and only allow the user to select the date using the calendar.
<fieldset class="form-group">
<label>End Date</label>
<div class="input-group">
<span class="input-group-addon" (click)="dpEndDate.toggle()">
<i class="fa fa-calendar"></i>
</span>
<input readonly required [(ngModel)]="model.endDate"
type="text" class="form-control" id="endDate"
name="endDate" ngbDatepicker #dpEndDate="ngbDatepicker">
</div>
</fieldset>
source to share