Question

我在angular 8应用程序中具有Devextreme形式。如果您在下面的代码中看到表单中的第一个控件，则为下拉列表（dxSelectBox）。下拉菜单中有一个onSelectionChanged事件。在下拉菜单中选择一个项目会触发此事件。您也可以在html中看到，我们正在使用

例如

min: selectedBenefitData?.name != 'Vitality Life Plan' && selectedBenefitData?.name != 'Vitality Essentials Plan' ? 0.1 : 0

在UI中进行此类检查的最佳实践是什么。将来我将有更多值需要检查，并且上述条件可能会增加。有什么建议吗

HTML

<dx-form #benefitForm [formData]="formBenefitData" [showValidationSummary]="true" [labelLocation]="'top'">
      <dxi-item dataField="productBenefitId"
                editorType="dxSelectBox"
                [editorOptions]="{ items: availableBenefitTypes, valueExpr: 'id', displayExpr: 'name',
                  onSelectionChanged: updateSelectedBenefitData }"
                [label]="{ text: 'Benefit Type', location: 'top' }">
        <dxi-validation-rule type="required"
                             message="Please select an option for the benefit type"></dxi-validation-rule>
      </dxi-item>
      <dxi-item *ngIf="selectedBenefitData?.coverAmountRequired"
                dataField="coverAmount"
                editorType="dxNumberBox"
                [label]="{ text: 'Cover Amount', location: 'top' }"
                [editorOptions]="{ min: 1, max: quoteCoverBounds.lifeCoverUpper, format: { type: 'currency', precision: 0 } }">
        <dxi-validation-rule type="required" message="Please enter the cover required"></dxi-validation-rule>
      </dxi-item>
      <dxi-item *ngIf="!selectedBenefitData?.coverAmountRequired"
                editorType="dxTextBox"
                [label]="{ text: 'Cover Amount', location: 'top' }"
                [editorOptions]="{ disabled: true, value: 'Not applicable' }">
      </dxi-item>
      <dxi-item dataField="monthlyPremium"
                editorType="dxNumberBox"
                [label]="{ text: 'Monthly premium', location: 'top' }"
                [editorOptions]="{
                min: selectedBenefitData?.name != 'Vitality Life Plan' && selectedBenefitData?.name != 'Vitality Essentials Plan' ? 0.1 : 0,
                max: quoteCoverBounds.monthlyPremiumUpper, format: { type: 'currency', precision: 2 } }">
        <dxi-validation-rule type="required" message="Please enter the cover required"></dxi-validation-rule>
      </dxi-item>

      <dxi-item *ngIf="selectedBenefitData?.indexable"
                dataField="indexed"
                editorType="dxSwitch"
                [editorOptions]="{ switchedOnText: 'YES', switchedOffText: 'NO' }"
                [label]="{ text: 'Is Indexed' }">
      </dxi-item>
      <dxi-item *ngIf="selectedBenefitData?.guaranteeable"
                dataField="guaranteed"
                editorType="dxSwitch"
                [editorOptions]="{ switchedOnText: 'YES', switchedOffText: 'NO' }"
                [label]="{ text: 'Is Guaranteed' }">
      </dxi-item>
      <dxi-item dataField="productCoverTermId"
                editorType="dxSelectBox"
                [editorOptions]="{ items: staticData.coverTerms, valueExpr: 'id', displayExpr: 'term', onSelectionChanged: updateTermDescription }"
                [label]="{ text: 'Cover Term Type', location: 'top' }">
        <dxi-validation-rule type="required" message="Please select an option for the premium term type"></dxi-validation-rule>
      </dxi-item>
      <dxi-item dataField="coverTermLength"
                editorType="dxNumberBox"
                [label]="{ text: 'Cover term length' }"
                *ngIf="showCoverTermLength"
                [editorOptions]="{ min: 1 }">
        <dxi-validation-rule type="required" message="Please enter the monthly premium for cover"></dxi-validation-rule>
      </dxi-item>
      <dxi-item itemType="button"
                horizontalAlignment="left"
                [buttonOptions]="{ text: formBenefitData.id ? 'Update' : 'Add', type: 'success', useSubmitBehavior: true }"></dxi-item>
    </dx-form>

CS文件

public selectedBenefitData: BenefitType = {
    id: 0, name: '', indexable: false,
    guaranteeable: false, coverAmountRequired: true
  };

      public updateSelectedBenefitData = e => {
    this.selectedBenefitData = <BenefitType>e.selectedItem;
    if (!chain(() => this.selectedBenefitData.coverAmountRequired)) {
      this.formBenefitData.coverAmount = undefined;
    }
  }

Answer 1

在这里，您可以将复杂的条件合并为一个属性，然后将这些属性用于模板文件。

.ts文件的代码示例：

validationProperty: boolean | string | whatever type you need; 

functionToSetValidationProperty() {
  this.validationProperty = selectedBenefitData?.name != 'Vitality Life Plan' && selectedBenefitData?.name != 'Vitality Essentials Plan' ? 0.1 : 0;
}

您可以随时从.ts文件中调用上述函数来更新验证属性。

这种情况的示例可以是：

从API获取最新数据时，可以调用此函数以更新验证。
您可以在ngOnInit上调用此函数
任何需要的地方。

基于您在Question中的示例的代码示例：

min: validationProperty

原因为何我们需要使用属性而非功能：

因为更改检测将触发那些被称为eveytime的方法。（来自@Nicholas K的评论。这就是为什么我们不应该在模板中使用方法的原因。

角度-验证html中的下拉值

1 个答案: