Блог

Главная - Вопросы по программированию - проверка поля выбора во вложенном компоненте

проверка поля выбора во вложенном компоненте

#angular #devextreme

#angular #devextreme

Вопрос:

в моем приложении angular я планирую использовать поле выбора в нескольких формах. Для этого я создал общий компонент, подобный этому:

 <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 в разметке (если бы я мог это сделать bold…no , выделенная жирным шрифтом кнопка не выделяет его жирным шрифтом). Поле выбора отображается в форме правильно, и я получаю в нем значения.

Я прикрепляю к dxi-item обязательному dxi-validation-rule . Если я нажму кнопку сохранения в форме и оставлю поле выбора пустым, обязательная отметка не отображается. Но если я удалю companyselectbox компонент и заменю его разметкой в companyselectbox компоненте, появится требуемая метка.

Итак, вопрос в том, как мне заставить проверку работать с companyselectbox ? Я бы не хотел повторять dx-select-box компонент в каждой форме.

Комментарии:

1. Я бы не стал использовать внешнюю проверку. Скорее я бы переместил его в само поле выбора и использовал ngModel, который поддерживает онлайн-атрибут шаблона для проверки dev.to/jwp/ngmodel-internals-2m9f