在 FormGroup 下的 p-calendar 中使用 (onBlur) 事件的表单验证问题
Form Validation Issue with using (onBlur) event in p-calendar under FormGroup
我正在更新 P-calendar 模型值 onblur 事件,即使模型更新后表单控件有效,但表单验证抛出错误。
html
<form (ngSubmit)="onSubmit()" [formGroup]="form" class="box-model form-support-margin">
<div class="col-md-10 col-sm-12 col-xs-12">
<p-calendar [(ngModel)]="tbDate" [dateFormat]="dateFormat"
[showIcon]="true" formControlName="tbDate" readonlyInput="false"
(onBlur)="tbDateChange($event)">
</p-calendar>
</div>
</form>
component.ts
import { Component, OnInit, EventEmitter, Pipe, ChangeDetectorRef, Input } from "@angular/core";
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import * as moment from 'moment'
import { Router } from '@angular/router';
@Component({
templateUrl: "address.component.html",
})
export class AddressComponent implements OnInit {
constructor( private fb: FormBuilder){}
ngOnInit() {
this.initFormGroup();
}
initFormGroup() {
this.form = this.fb.group({
tbDate: new FormControl(this.tbDate|| '', Validators.required);
});
}
tbDateChange(event: any) {
let time = event.srcElement.value;
let d = new Date();
this.tbDate=d;
}
}
p-calendar
会自动验证输入带有斜杠“/”的日期,这也使表单有效。因此,我使用此功能来解决您让用户手动输入日期的问题。
在我的示例中,“/”会在用户输入月份和日期后自动添加。我还添加了输入验证,以便只能输入数字。
html:
<form (ngSubmit)="onSubmit()" [formGroup]="form" class="box-model form-support-margin">
<div class="col-md-10 col-sm-12 col-xs-12">
<p-calendar [dateFormat]="dateFormat" [(ngModel)]="modelVal"
[showIcon]="true" formControlName="tbDate" [readonlyInput]="false"
(keydown)="onlyNumbers($event)"
(keyup)="addSlash($event)">
</p-calendar>
</div>
<p></p>
<button md-raised-button color="primary" type="submit" class="" [disabled]="!form.valid">Save</button>
</form>
ts:
dateFormat: = "mm/dd/yy"
constructor( private fb: FormBuilder){}
ngOnInit() {
this.initFormGroup();
}
initFormGroup() {
this.form = this.fb.group({
tbDate: new FormControl(this.tbDate|| '', Validators.required);
});
}
addSlash($event){
if(event.code != "Backspace" && (event.srcElement.value.length == 2 || event.srcElement.value.length == 5)){
event.srcElement.value += '/';
}
}
onlyNumbers(event){
if(event.code == "Backspace"
|| event.code == "ArrowLeft"
|| event.code == "ArrowRight"){
return true;
}
if(event.srcElement.value.length < 10){
if((event.keyCode >= 48 && event.keyCode <= 57)
|| (event.keyCode >= 96 && event.keyCode <= 105))
return true;
else
return false;
}
else
return false;
}
}
希望此解决方法能解决您的问题:)
我正在更新 P-calendar 模型值 onblur 事件,即使模型更新后表单控件有效,但表单验证抛出错误。
html
<form (ngSubmit)="onSubmit()" [formGroup]="form" class="box-model form-support-margin">
<div class="col-md-10 col-sm-12 col-xs-12">
<p-calendar [(ngModel)]="tbDate" [dateFormat]="dateFormat"
[showIcon]="true" formControlName="tbDate" readonlyInput="false"
(onBlur)="tbDateChange($event)">
</p-calendar>
</div>
</form>
component.ts
import { Component, OnInit, EventEmitter, Pipe, ChangeDetectorRef, Input } from "@angular/core";
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import * as moment from 'moment'
import { Router } from '@angular/router';
@Component({
templateUrl: "address.component.html",
})
export class AddressComponent implements OnInit {
constructor( private fb: FormBuilder){}
ngOnInit() {
this.initFormGroup();
}
initFormGroup() {
this.form = this.fb.group({
tbDate: new FormControl(this.tbDate|| '', Validators.required);
});
}
tbDateChange(event: any) {
let time = event.srcElement.value;
let d = new Date();
this.tbDate=d;
}
}
p-calendar
会自动验证输入带有斜杠“/”的日期,这也使表单有效。因此,我使用此功能来解决您让用户手动输入日期的问题。
在我的示例中,“/”会在用户输入月份和日期后自动添加。我还添加了输入验证,以便只能输入数字。
html:
<form (ngSubmit)="onSubmit()" [formGroup]="form" class="box-model form-support-margin">
<div class="col-md-10 col-sm-12 col-xs-12">
<p-calendar [dateFormat]="dateFormat" [(ngModel)]="modelVal"
[showIcon]="true" formControlName="tbDate" [readonlyInput]="false"
(keydown)="onlyNumbers($event)"
(keyup)="addSlash($event)">
</p-calendar>
</div>
<p></p>
<button md-raised-button color="primary" type="submit" class="" [disabled]="!form.valid">Save</button>
</form>
ts:
dateFormat: = "mm/dd/yy"
constructor( private fb: FormBuilder){}
ngOnInit() {
this.initFormGroup();
}
initFormGroup() {
this.form = this.fb.group({
tbDate: new FormControl(this.tbDate|| '', Validators.required);
});
}
addSlash($event){
if(event.code != "Backspace" && (event.srcElement.value.length == 2 || event.srcElement.value.length == 5)){
event.srcElement.value += '/';
}
}
onlyNumbers(event){
if(event.code == "Backspace"
|| event.code == "ArrowLeft"
|| event.code == "ArrowRight"){
return true;
}
if(event.srcElement.value.length < 10){
if((event.keyCode >= 48 && event.keyCode <= 57)
|| (event.keyCode >= 96 && event.keyCode <= 105))
return true;
else
return false;
}
else
return false;
}
}
希望此解决方法能解决您的问题:)