繁体   English   中英

跨字段验证在Angular中不起作用

Cross field validation doesn't work in Angular

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我在两个单独的组件中有两个日期字段。 我在生效日期设置验证,以确认生效日期是否早于申请日期。 如果早于申请日期,则会显示错误消息。

我现在的问题是:如果用户首先输入申请日期,然后输入生效日期,则验证工作正常。 但是,如果用户在输入生效日期后更改了申请日期,则不会触发验证。 换句话说,只有在生效日期更改时才触发验证。

申请日期更改后,如何在生效日期进行验证? 我还注意到,有效日期早于申请日期,就会显示错误消息。 然后,我将申请日期更改为有效日期,错误消息不会消失。

我试图将申请日期传递给有效日期组件。 但是,它不符合我的预期。

step1.component.html是调用这两个组件的页面。 我将applicationDate $作为[minEffectiveDate] =“ applicationDate $ | async”传递给子组件。

step1.component.html ,应用程序日期位于应用程序内部使用组件内部。

<app-internal-use formControlName="internalUse" (brokerSearchIDResult)="addBrokerToApp($event)"
    (clientSearchIDResult)="handleClientSearchResult($event)" [shouldShowBrokerSearch]="shouldShowCommissionSplitBasedOnRoles">
  </app-internal-use>
...
<div class="col-sm-5">
  <app-plan-effective-date formControlName="effectiveDate" [submitted]="submitted" [minEffectiveDate]="applicationDate$ | async"></app-plan-effective-date>
</div>

effectiveDate.component.html

<label>Effective Date</label>
<div class="input-group margin-xs-bottom-10" [ngClass]="{ 'has-error' : !this.control.valid && (control.touched || submitted) }">
    <input class="form-control" [formControl]="control" bsDatepicker required [minDate]="minEffectiveDate"
        #dpEffdate="bsDatepicker">
    <span class="input-group-addon datepicker-icon" (click)="dpEffdate.toggle()">
        <i class="fa fa-calendar"></i>
    </span>
</div>
<div class="errorMessage" *ngIf="control.hasError('dateNotLessThanSpecifiedDate') && (submitted || control.touched)">Effective
    date cannot be less than the application date</div>

EffectiveDate.component.ts

...
export class PlanEffectiveDateComponent extends AbstractValueAccessor implements OnInit, Validator, OnChanges {
@Input() submitted = false;
@Input() minEffectiveDate: Date;
control: FormControl;

constructor(private validatorService: ValidatorService, private cd: ChangeDetectorRef) {
    super();
}

ngOnInit() {
    this.initializeForm();
    this.handleFormChanges();
}

ngOnChanges(changes: SimpleChanges) {
    const minEffectiveDateChange = changes['minEffectiveDate'];

    if (!!minEffectiveDateChange && !minEffectiveDateChange.firstChange &&
        minEffectiveDateChange.currentValue !== minEffectiveDateChange.previousValue &&
        !!this.control) {
        this.setEffectiveDateValidator();
    }
}

initializeForm() {
    this.control = new FormControl('', this.composeEffectiveDateValidator());
}

setEffectiveDateValidator() {
    this.control.clearValidators();
    this.control.setValidators(this.composeEffectiveDateValidator());
    setTimeout(() => this.control.updateValueAndValidity({ emitEvent: false }), 0);
    this.cd.detectChanges();
}

composeEffectiveDateValidator(): ValidatorFn {
    const maxEffectiveDate = utils.currentMoment().add(6, 'month').toDate();

    return Validators.compose(
        [
            this.validatorService.dateNotGreaterThanSpecifiedDate(maxEffectiveDate),
            this.validatorService.dateNotLessThanSpecifiedDate(this.minEffectiveDate)
        ]
    );
}

handleFormChanges() {
    this.control.valueChanges.subscribe(value => {
        this.value = value;
    });
}

writeValue(value) {
    if (value) {
        this.control.setValue(value, { emitEvent: false });
    }
}

validate(control: FormControl) {
    return this.control.valid ? null : { planEffectiveDateRequired: true };
}
}

dateNotLessThanSpecifiedDate函数:

  dateNotLessThanSpecifiedDate(maxDate: Date) {
return (control: FormControl): { [key: string]: any } => {
  if (!!control.value && control.value < maxDate) {
    return { 'dateNotLessThanSpecifiedDate': true };
  } else {
    return null;
  }
};
}

任何帮助将不胜感激!

谢谢!

1 个回复

我们通过使用ChangeDetectionStragegy.OnPush解决了这一问题。 这是解决方案。

计划生效日期.component.ts

control = new FormControl('', this.buildValidator.bind(this));

constructor(
private cd: ChangeDetectorRef,
private controlDir: NgControl,
) {
super();
this.controlDir.valueAccessor = this;
}

ngOnInit() {
this.handleFormChanges();
this.controlDir.control.setValidators(this.validate.bind(this));
this.updateValidity();
}

updateValidity() {
setTimeout(() => {
  this.control.updateValueAndValidity();
  this.controlDir.control.setValidators(this.validate.bind(this));
  this.cd.detectChanges();
}, 0);
}

在ngOnChanges内部,调用updateValidity()

ngOnChanges(changes: SimpleChanges) {
const minEffectiveDateChange = changes['minEffectiveDate'];
const currentPlanEndDateChange = changes['currentPlanEndDate'];

if ((!!minEffectiveDateChange && !minEffectiveDateChange.firstChange &&
  minEffectiveDateChange.currentValue !== minEffectiveDateChange.previousValue &&
  !!this.control) ||
  (!!this.currentPlanEndDate && !currentPlanEndDateChange.firstChange &&
    currentPlanEndDateChange.currentValue !== currentPlanEndDateChange.previousValue
    && !!this.control)) {
  this.updateValidity();
}
}

buildValidator()方法仅用于设置自定义验证器。

希望这可以帮助与我有类似问题的人:)

1 密码验证在Angular中不起作用

嗨,我正在尝试使用ng-show验证密码,即使密码正确也显示错误消息,并且在刷新页面时也会显示错误消息。 我的代码是:表单名称是:registeruser 我用占位符名称,id和模型名称检查了ng-show,但是它不起作用。 另外,如果用户在不输入密码的情况下跳出密码字段,并且在 ...

3 Bootstrap验证在Angular框架中不起作用

我需要输入框的颜色根据其状态(有效或无效)更改颜色。 我正在关注一个教程,在他的教程中它可以更改。 我复制并粘贴了他的代码,因此我可以确定自己没有丢失任何东西,但是我仍然无法使它正常工作。 请在下面查看我的代码: styles.css 付款细节组件 使用检查器时,应该 ...

6 Bootstrap表单验证在angular2中不起作用

我已经在我的angular2应用程序中实现了引导表单验证,即使正确使用了引导表单验证指令,某些表单元素也没有得到验证。 当我尝试检查代码时,我发现“有错误”类没有出现在表单字段中。 这是我的表单代码: 这是我的表单显示的样子: 这是我的component.ts代码: ...

7 表单字段样式在 Angular 9 中不起作用?

这是我的 app.component.html: app.module.ts 表单字段样式将是这样的: 如果我写了一些东西,那么我就把它写在标签上: 这是什么原因造成的? 我如何才能达到他像这里这样的简单表单字段: https : //material.angular.io/com ...

9 名称字段验证在cakephp中不起作用

下面是我已经可以使用的模型函数...我需要验证名称字段。 当我提交空白表格时.....表格显示输入投资组合名称。 当我在名称字段中输入数值时,表格显示输入有效的投资组合名称。 但是当我提交空白表格时,表格不会显示任何有关名称字段的消息。 当我在名称文本框中输入数字值并提交 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM