使用指令格式化日期和更新输入，但验证器不喜欢它
我有一个为date of birth (道布)创建的formControl字段。我的目标是让我的指令在他们使用MMDDYYYY输入日期时将我的日期字段输入到MM/DD/YYYY中，这一指令做得很好。我在道布字段上也有一个验证器(使用reactive form方法)，它使用正则表达式来验证条目是否为日期。
验证器将表单标记为有错误。在调试时，我发现指令正确地更新了输入表单的值，但在继续调试其余代码(内置Angular)时，其余代码(似乎是处理验证的代码)仍然可以看到旧值(示例02022010)。我是Angular和Javascript的新手，所以我唯一的想法是这可能是一个作用域问题？
我试着只使用验证器而不使用指令，以确保模式被正确注册。该模式确实验证了date字段的正确性，所以我不认为Validator.pattern在这里是一个坏模式的问题。
以下帖子：Validate md-datepicker using formcontrol与我的关系密切，但它对我没有帮助，我也没有使用datepicker或想要datepicker。
app.component.ts
import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
<form [formGroup]='searchForm'>
<input #firstNameField formControlName='firstName' placeholder="Enter first name">
<input #lastNameField formControlName='lastName' placeholder="Enter last name">
<input #dobField formControlName='dob' placeholder='MM/DD/YYYY' autocomplete="off" appDOBinput></form>
<div *ngIf="searchForm.controls['dob'].hasError('pattern')">Date is invalid</div>
`,
styleUrls: ['./app.component.scss']
})
export class AppComponent {
searchForm: FormGroup;
// tslint:disable-next-line: max-line-length
REGEX = RegExp('^(?:(?:10|12|0?[13578])/(?:3[01]|[12][0-9]|0?[1-9])/(?:1[8-9]\\d{2}|[2-9]\\d{3})|(?:11|0?[469])/(?:30|[12][0-9]|0?[1-9])/(?:1[8-9]\\d{2}|[2-9]\\d{3})|0?2/(?:2[0-8]|1[0-9]|0?[1-9])/(?:1[8-9]\\d{2}|[2-9]\\d{3})|0?2/29/[2468][048]00|0?2/29/[3579][26]00|0?2/29/[1][89][0][48]|0?2/29/[2-9][0-9][0][48]|0?2/29/1[89][2468][048]|0?2/29/[2-9][0-9][2468][048]|0?2/29/1[89][13579][26]|0?2/29/[2-9][0-9][13579][26])$');
constructor() {
this.searchForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
dob: new FormControl('', { validators: Validators.pattern(this.REGEX), updateOn: 'blur' })
});
}
}date-input.directive.ts
import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[formControlName] [appDOBinput]',
})
export class DateInputDirective {
constructor(public ngControl: NgControl) { }
@HostListener('ngModelChange', ['$event'])
onModelChange(event) {
this.onInputChange(event, false);
}
@HostListener('keydown.backspace', ['$event'])
keydownBackspace(event) {
this.onInputChange(event.target.value, true);
}
onInputChange(event, backspace) {
let newVal = event.replace(/\D/g, '');
if (backspace && newVal.length <= 6) {
newVal = newVal.substring(0, newVal.length - 1);
}
if (newVal.length === 0) {
newVal = '';
} else if (newVal.length <= 3) {
newVal = newVal.replace(/^(\d{0,2})/, '$1/');
} else if (newVal.length <= 4) {
newVal = newVal.replace(/^(\d{0,2})(\d{0,2})/, '$1/$2/');
} else {
newVal = newVal.replace(/^(\d{0,2})(\d{0,2})(\d{0,4})/, '$1/$2/$3');
}
console.log('value in directive: ' + newVal);
this.ngControl.valueAccessor.writeValue(newVal);
}
}该指令的控制台输出显示了正确的输出，例如输入02022010将输出02/02/2010。但是，如果我最终继续一步一步地调试(在core.js这样的文件中)，我会看到value字段仍然是02022010。一旦完成了所有逻辑，日期字段之后的输出就是'Date is invalid‘
这几乎就像是验证所涉及的逻辑仍然使用旧值。
回答 2
Stack Overflow用户
发布于 2019-08-04 01:43:21
我认为验证日期的正则表达式有问题。尝尝这个
/^((0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2})*$
Stack Overflow用户
发布于 2019-08-05 14:38:52
对于验证日期，您可以使用@rxweb/reactive-form-validators的date验证器，而无需创建任何自定义指令或函数，它将允许您根据您的格式验证日期
ngOnInit() {
this.searchForm = this.formBuilder.group({
birthDate:['', RxwebValidators.date()],
});
}您只需要在app模块中导入RxReactiveFormsModule即可
下面是完整的组件代码：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms"
import { RxwebValidators } from '@rxweb/reactive-form-validators';
@Component({
selector: 'app-date-add-validator',
templateUrl: './date-add.component.html'
})
export class DateAddValidatorComponent implements OnInit {
searchForm: FormGroup
constructor(
private formBuilder: FormBuilder )
{ }
ngOnInit() {
this.searchForm = this.formBuilder.group({
birthDate:['', RxwebValidators.date()],
});
}
}<div>
<form [formGroup]="searchForm">
<div class="form-group">
<label>Birth Date</label>
<input type="text" formControlName="birthDate" class="form-control" />
<small class="form-text text-muted">You must enter a valid date only<br/></small>
<small class="form-text text-danger" *ngIf="searchForm.controls.birthDate.errors">{{searchForm.controls.birthDate.errors.date.message}}<br/></small>
</div>
<button [disabled]="!searchForm.valid" class="btn btn-primary">Submit</button>
</form>
</div>
工作Example
https://stackoverflow.com/questions/57340650
复制相似问题
腾讯云开发者
