使用ControlValueAccessor的嵌套控件从父型形式到嵌套控制

发布于 2025-02-06 22:57:21 字数 1691 浏览 4 评论 0原文

我已经基于ControlValueAccessor创建了位置表格。我已经注意到,当我在父级组件中进行API调用时,它返回与位置控件相关的一些错误,这些错误是父母表单的一部分,父母表单会看到这些错误,但是由于某种原因,子女表格没有看到它们。

organization.component.html

<div [formGroup]="organizationForm" class="organization-form">
        ....
        <app-location-form 
            formControlName="location"
            [locationErrors]="organizationForm.get('location').errors" // <----
        ></app-location-form>
</div>

as you can see I am passing them via date binding, because I couldn't figure out how can I do it in some other way.

and thats how they are being displayed in child component:

location-form.component.ts

<form class="location-form" [formGroup]="locationForm" novalidate>
  <mat-form-field
    class="form-field"
    [matTooltip]="readonlyText"
    [matTooltipDisabled]="!isFormDisabled"
  >
  <mat-error *ngIf="(locationErrors?.backend?.address)[0]"> // <------
    {{ (locationErrors?.backend?.address)[0] }}             // <------
  </mat-error>                                              // <------

    <input
      matInput
      placeholder="Adres"
      formControlName="address"
      [matAutocomplete]="addressAuto"
      (blur)="onTouched()"
    />
  </mat-form-field>
...
</form>

because, the locationForm.errors are null although when I go up to parent component and check value of organizationForm. location.Errors它预计分配了错误。我认为ControlValueAccessor将能够从父型控制到子形式的表格中执行问题和同步错误,但不幸的是,它不是,我认为我的解决方案不是您应该处理它的方式。因此,我要求提供一些建议,如何犯错误,这些错误已设置为以父母形式控制的父母形式,以便以子女形式反映,以便我可以直接从那里阅读它们?

I have created location Form based on ControlValueAccessor. I have noticed when I do api call in parent component and it returns some errors related to location control which is part of parent form and the parent form see those errors, but for some reason child form doesn't see them.

organization.component.html

<div [formGroup]="organizationForm" class="organization-form">
        ....
        <app-location-form 
            formControlName="location"
            [locationErrors]="organizationForm.get('location').errors" // <----
        ></app-location-form>
</div>

as you can see I am passing them via date binding, because I couldn't figure out how can I do it in some other way.

and thats how they are being displayed in child component:

location-form.component.ts

<form class="location-form" [formGroup]="locationForm" novalidate>
  <mat-form-field
    class="form-field"
    [matTooltip]="readonlyText"
    [matTooltipDisabled]="!isFormDisabled"
  >
  <mat-error *ngIf="(locationErrors?.backend?.address)[0]"> // <------
    {{ (locationErrors?.backend?.address)[0] }}             // <------
  </mat-error>                                              // <------

    <input
      matInput
      placeholder="Adres"
      formControlName="address"
      [matAutocomplete]="addressAuto"
      (blur)="onTouched()"
    />
  </mat-form-field>
...
</form>

because, the locationForm.errors are null although when I go up to parent component and check value of organizationForm.location.errors it has expected errors assigned. I thought that ControlValueAccessor would be able to do the trick and sync errors from parent form control to child form but unfortunately it doesn't, and I don't think my solution is the way in which you should deal with it. So I am asking for some advice, how to make the errors, which have been set to control in parent form to be reflected in child form so I can read them directly from there?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文