Угловая форма с датпикером, проблема с валидаторами

Мне нужно сделать форму на angular, и только для ввода даты я использую библиотеку материалов (чтобы получить средство выбора даты).

Вот как я объявляю свою форму:

this.editProfileForm = this.formBuilder.group({
  lastname: [this._appState.user.lastName, Validators.required],
  firstname: [this._appState.user.firstName, Validators.required],
  email: [this._appState.user.email, [Validators.required, Validators.email]],
  phone: [this._appState.user.phone.replace(/\s/g, ''), [Validators.pattern('[0-9]{10}')]],
  birthdate: [this._appState.user.birthDate, [Validators.required]],
  password: [''],
  new_password: [''],
  new_password_confirm: [''],
});
this.editProfileForm.setValidators([this.ageValidator]);

И ageValidator :

public ageValidator(form: FormGroup): any {
const birthdate = new Date(form.controls.birthdate.value);
const min_date = new Date();
min_date.setFullYear(min_date.getFullYear() - 15);

return (birthdate.getTime() < min_date.getTime() ? null : {minAge: true});

}

А вот HTML ввода даты и его ошибок:

<div class = "form-group">
                <mat-form-field class = "example-full-width">
                    <input formControlName = "birthdate" matInput [matDatepicker] = "picker" [ngClass] = "{ 'is-invalid': submitted && (f.birthdate.errors || editProfileForm.hasError('minAge')) }">
                    <mat-datepicker touchUi #picker></mat-datepicker>
                    <span (click) = "picker.open()">test</span>
                </mat-form-field>
                <div *ngIf = "submitted && (f.birthdate.errors || editProfileForm.hasError('minAge'))" class = "invalid">
                    <div *ngIf = "editProfileForm.hasError('minAge') && !f.birthdate.errors">{{ 'COMPONENTS.REGISTER.BIRTHDATE_ERROR_AGE' | translate }}</div>
                    <div *ngIf = "f.birthdate.errors?.required">{{ 'COMPONENTS.REGISTER.FIELD_REQUIRED' | translate }}</div>
                </div>
            </div>

Моя проблема странная, и я не могу понять, почему она это делает.

Если я ввожу дату в формате, отличном от мм/дд/гггг, ввод говорит, что это требуется (например, если внутри ничего нет). Но когда я использую средство выбора даты, оно заполняет ввод датой в формате дд/мм/гггг, и в этом случае у меня нет ошибки (почему ??).

И если я ввожу дату в формате мм/дд/гггг (это тот, который не вызывает ошибку), а затем щелкаю, чтобы открыть средство выбора даты, дата преобразуется в дд/мм/гггг, и ошибка все еще не появляется . Не знаю, понятно ли мое объяснение.

У кого-нибудь есть идея?

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
270
1

Ответы 1

Конечно, это зависит от вашего языкового стандарта, когда у вас есть формат мм/дд/гггг, вы не можете вводить такие значения, как 20/02/2019, как в формате дд/мм/гггг, они должны соответствовать вашему языку. Поскольку вы использовали средство выбора даты материала angular, чтобы изменить свою локаль, вы можете следовать примеру https://stackblitz.com/angular/lroqakengek стека.

Итак, мой указатель даты находится на французском языке (дд / мм / гггг), а мой ввод - на другом языке? (мм/дд/гггг), как я могу изменить формат ввода? Я бы хотел сохранить французский формат. А также, почему ввод говорит, что это необходимо, если внутри есть значение? Даже если значение неверно

Jess 08.02.2019 16:05

Другие вопросы по теме