Question

我必须在角度上形成表格，并且仅在输入日期时才使用Material librarie（获取日期选择器）。

这是我声明表单的方式：

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，则输入内容是必需的（例如，如果里面没有任何内容）。但是，当我使用datepicker时，它用dd / mm / yyyy格式的日期填充输入，在这种情况下，我没有错误（为什么??）。

如果我输入的日期格式为mm / dd / yyyy（这不会引发错误），然后单击以打开日期选择器，则日期将转换为dd / mm / yyyy和错误仍然没有出现。我不知道我的解释是否很清楚。

有人知道吗？

Answer 1

Ofc它取决于您的语言环境，当您使用mm / dd / yyy格式时，不能像dd / mm / yyy格式那样输入20/02/2019这样的值，它应与您的语言环境匹配。当您使用角度材质的日期选择器时，要更改您的语言环境，您可以按照堆栈闪击示例https://stackblitz.com/angular/lroqakengek

带日期选择器的角形，验证器有问题

1 个答案: