验证嵌套组件中的选择框

问题描述

在我的角度应用程序中，我计划在多种表单上使用选择框。为此，我创建了一个像这样的通用组件：

<dx-select-Box [dataSource]="companies"
               valueExpr="id"
               displayExpr="name"
               openOnFieldClick="true"
               deferRendering="false"
               noDataText="Nincs megjelenítendő adat"
               placeholder="Kérlek válassz"
               [value]="valueId">
</dx-select-Box>

对应的ts文件：

import { Component,Input } from '@angular/core';
import { CompanyService } from '../../../services/masterdata/general/company.service';
import { Company } from '../../../models/masterdata/general/company.model';

@Component({
  selector: 'companyselectBox',templateUrl: './companyselectBox.component.html',styleUrls: []
})
export class CompanySelectBoxComponent {

  @input() valueId: number;

  companies: Company[];

  constructor(private service: CompanyService) {
    this.service.getCompanies().subscribe(companies => this.companies = companies);
  }
}

这有效，我在选择框中获得了值。

现在，我可以在其他组件中使用它了，

<form (submit)="onFormSubmit($event)" method="post">
  <dx-form #plantForm id="form" [formData]="plant" validationGroup="valgroup" labelLocation="top">
    <dxi-item datafield="id" [visible]="false">
    </dxi-item>
    <dxi-item datafield="companyId" [label]="{text: 'Gazdasági egység'}">
      <companyselectBox [valueId]="companyId"></companyselectBox>
      <dxi-validation-rule type="required" message="A mező kitöltése kötelező"></dxi-validation-rule>
    </dxi-item>
    <dxi-item datafield="code" [label]="{text: 'Gyárkód'}">
      <dxi-validation-rule type="required" message="A mező kitöltése kötelező"></dxi-validation-rule>
      <dxi-validation-rule type="async" message="Ilyen nevű gyár már létezik" [validationCallback]="checkCode">
      </dxi-validation-rule>
    </dxi-item>
    <dxi-item datafield="location" [label]="{text: 'Székhely'}">
      <dxi-validation-rule type="required" message="A mező kitöltése kötelező"></dxi-validation-rule>
    </dxi-item>
    <dxi-item itemType="group">
      <div *dxTemplate>
        <div style="text-align: right">
          <dx-button text="Mentés" [width]="100" type="default" stylingMode="contained"
                     [useSubmitBehavior]="true" style="margin-right: 5px" validationGroup="valgroup"></dx-button>
          <dx-button text="Mégsem" [width]="100" type="normal" (click)="closeButtonClick()"></dx-button>
        </div>
      </div>
    </dxi-item>
  </dx-form>
</form>

每个导入文件都已放置，编译时没有错误。

在标记中寻找companyselectBox（如果我可以将其设为粗体...否，则粗体按钮不会使其变为粗体）。选择框在表单上显示正确，并且我在其中获取了值。

我在dxi-item上附加了必需的dxi-validation-rule。如果我点击了表单上的保存按钮，然后将选择框留空，则不会显示任何必需的标记。但是，如果我删除companyselectBox组件并替换为companyselectBox组件中的标记，则会显示所需的标记。

因此，问题是，如何使用companyselectBox进行验证？我不想在每种表单上重复使用dx-select-Box组件。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular devextreme