选择时所需的自定义验证更改-解网

问：

我在 Angular HTML 中有一个下拉列表和两个文本框。我想实现一个功能，如果选择了“payable_frequency”下拉列表，那么“payable_commission”字段（最小值或最大值）中的任何一个都将成为必需的，并且能够显示 mat-error 消息。否则，这两个payable_commission字段都不是必需的。我尝试使用，但两种方法都不起作用。请提供此问题的解决方案。我不喜欢在.ts文件中直接使用 [Validator.required] 或在 .html 文件中使用“required”关键字。(selectionChange)="customFunction($event.value)"min_payable_commission:['',[customValidatorFunction]],

ngOnInit(): void {
  this.couauiChargesForm = this.formBuilder.group({
      id: [''],
      payable_frequency_ref_id:[''],
      min_payable_commission:[''],
      max_payable_commission:[''],
    });
}

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <mat-label>Payable Frequency</mat-label>
    <mat-form-field class="example-full-width" appearance="outline">
        <mat-select formControlName="payable_frequency_ref_id">
            <mat-option value="" >Select Payable Frequency</mat-option>
            <mat-option [value]="data.id" *ngFor="let data of billingFrequencyData">{{ data.master_key }}</mat-option>
        </mat-select>
    </mat-form-field>                            
</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="form-group">
        <mat-label>Min Payable Commission</mat-label>
        <mat-form-field class="example-full-width" appearance="outline">
            <input matInput formControlName="min_payable_commission" type="number" placeholder="0">
            <mat-error *ngIf="couauiChargesForm.get('min_payable_commission')">This Field is required!</mat-error>
        </mat-form-field>
    </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="form-group">
        <mat-label>Max Payable Commission</mat-label>
        <mat-form-field class="example-full-width" appearance="outline">
            <input matInput formControlName="max_payable_commission" type="number" min="0" placeholder="0">
            <mat-error *ngIf="couauiChargesForm.get('max_payable_commission')">This Field is required!</mat-error>
        </mat-form-field>
    </div>
</div>

JavaScript HTML Angular TypeScript 验证

// I'm not familiar with the Form Builder, so I wrote it out.    
public couauiChargesForm: FormGroup = new FormGroup({
  id: new FormControl(''),
  min_payable_commission: new FormControl('', this.commissionValidator),
  max_payable_commission: new FormControl('', this.commissionValidator)
});

private commissionValidator(control: FormControl) {
  const refId = this.couauiChargesForm.controls.payable_frequency_ref_id.value;
  
  if (refId) {
    if (!control.value) {
      return {required: 'this field is required'};
    }
  }
  return null;
}

另一种方法是在对表单控件值更改做出反应时，以编程方式在最小值和最大值控件中添加和删除验证器。您必须订阅payable_frequency_ref_id的 valueChange 事件（记得在 onDestroy 中取消订阅！），然后您可以在其他控件中添加和删除验证器。然后调用每个控件的 UpdateValueAndValidity（）方法。然而，这不是我的首选方法。

选择时所需的自定义验证更改

Custom Validation for required on selectionChange

评论

评论