Угловая форма с указателем даты, проблема с валидаторами - PullRequest
0 голосов
/ 08 февраля 2019

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

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

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>

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

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

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

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

1 Ответ

0 голосов
/ 08 февраля 2019

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

.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...