使用ControlValueAccessor的嵌套控件从父型形式到嵌套控制
我已经基于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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论