How to use a date mask at Angular 10

Asked

Viewed 194 times

1

I have a form in my application where the user can edit various data, including his date of birth. In the edit date field I am using this input:


<div class="col-md-6">
              <label for="name">Data Nascimento</label>
              <input
                type="text"
                formControlName="dataNascimento"
                class="form-control" 
                id="name"
                mask="{{maskDtNascimento}}"
                [dropSpecialCharacters]="false"
                placeholder="00/00/0000"
                [readOnly]="justRead"
                required
              />
</div>

The variable maskDtNascimento is the following:

 maskDtNascimento = '00/00/0000';

The problem is that in this way this input allows me to put dates in a wrong format, like this:

input com máscara de data

I’m using Angular 10 and ngx-Mask on this project. My question is: how to make this input not allow the user to enter invalid dates and still display the formatted value correctly?

javascript html angular typescript

  • The Mask does not do data validations, just format. For this you will have to create a function that takes the data and checks if the values are valid. Now I think it’s silly to waste time with this, if it’s an input and you want to get a date, I would use a simple date input!

1 answer

1


As you are using ngx-Mask, try to put it this way:

     
        maskDtNascimento = 'd0/M0/0000';

In the ngx-Mask documentation you have several examples of use, already with the validations for the masks you need.

Browser other questions tagged javascript html angular typescript

You are not signed in. Login or sign up in order to post.