PrimeNG 日历表单组验证问题
PrimeNG calendar form group validation issue
我正在尝试向我的表单添加验证。
discount
字段不能为空,取值范围需要在0到100之间,time_from
和time_to
不能为空。我无法在 time_from
和 time_to
上触发验证过程。我使用 PrimeNG 日历组件。我发现 p-calendar
验证与 ngModule
配合使用效果很好,但我找不到任何针对表单组的解决方案。
组件(简体)
ngOnInit() {
this.buildForm();
}
buildForm(): void {
this.discountFG = this.fb.group({
discount: new FormControl('', [Validators.required, CustomValidators.range([0, 100])]),
time_from: new FormControl('', Validators.required),
time_to: new FormControl('', Validators.required)
});
this.discountFG.valueChanges
.subscribe(data => this.onValueChanged(data));
}
onValueChanged(data?: any) {
if (!this.discountFG) { return; }
const form = this.discountFG;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
模板(简体)
<p-calendar formControlname="time_from" [locale]="pl" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
yearRange="2010:2030" (blur)="setTimeFrom($event)" readonlyInput="true" required></p-calendar>
<p-calendar formControlname="time_to" [locale]="pl" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
yearRange="2010:2030" [minDate]="minDate" readonlyInput="true" required></p-calendar>
当前行为
验证器不会注意到是否选择了日期,因此,不会触发任何事件来捕捉值的变化,这意味着 onValueChanged
认为 time_from
并且 time_to
未被触及。
我该如何解决这个问题?
经过大量调试后,我发现由于语法错误,表单未通过验证:(,您将 formControlName
拼写为小写 n
。至少,情况是这样的您发布的代码。因此,表单控件从未获取值。
我在 Plunk 中修复了它并尝试了,它开始工作了。
html:
<form (ngSubmit)="onSubmit()" [formGroup]="discountFG" class="box-model form-support-margin">
<p-calendar formControlName="time_from" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
yearRange="2010:2030" (blur)="setTimeFrom($event)" readonlyInput="true">
</p-calendar>
<p-calendar formControlName="time_to" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
yearRange="2010:2030" [minDate]="minDate" readonlyInput="true"></p-calendar>
<p></p>
<button md-raised-button color="primary" type="submit" [disabled]="!discountFG.valid">Save</button>
</form>
我正在尝试向我的表单添加验证。
discount
字段不能为空,取值范围需要在0到100之间,time_from
和time_to
不能为空。我无法在 time_from
和 time_to
上触发验证过程。我使用 PrimeNG 日历组件。我发现 p-calendar
验证与 ngModule
配合使用效果很好,但我找不到任何针对表单组的解决方案。
组件(简体)
ngOnInit() {
this.buildForm();
}
buildForm(): void {
this.discountFG = this.fb.group({
discount: new FormControl('', [Validators.required, CustomValidators.range([0, 100])]),
time_from: new FormControl('', Validators.required),
time_to: new FormControl('', Validators.required)
});
this.discountFG.valueChanges
.subscribe(data => this.onValueChanged(data));
}
onValueChanged(data?: any) {
if (!this.discountFG) { return; }
const form = this.discountFG;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
模板(简体)
<p-calendar formControlname="time_from" [locale]="pl" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
yearRange="2010:2030" (blur)="setTimeFrom($event)" readonlyInput="true" required></p-calendar>
<p-calendar formControlname="time_to" [locale]="pl" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
yearRange="2010:2030" [minDate]="minDate" readonlyInput="true" required></p-calendar>
当前行为
验证器不会注意到是否选择了日期,因此,不会触发任何事件来捕捉值的变化,这意味着 onValueChanged
认为 time_from
并且 time_to
未被触及。
我该如何解决这个问题?
经过大量调试后,我发现由于语法错误,表单未通过验证:(,您将 formControlName
拼写为小写 n
。至少,情况是这样的您发布的代码。因此,表单控件从未获取值。
我在 Plunk 中修复了它并尝试了,它开始工作了。
html:
<form (ngSubmit)="onSubmit()" [formGroup]="discountFG" class="box-model form-support-margin">
<p-calendar formControlName="time_from" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
yearRange="2010:2030" (blur)="setTimeFrom($event)" readonlyInput="true">
</p-calendar>
<p-calendar formControlName="time_to" dateFormat="yy-mm-dd" [monthNavigator]="true" [yearNavigator]="true"
yearRange="2010:2030" [minDate]="minDate" readonlyInput="true"></p-calendar>
<p></p>
<button md-raised-button color="primary" type="submit" [disabled]="!discountFG.valid">Save</button>
</form>