angular – mat-error用于单独的组件无法正确呈现
我想使用mat-errors在我的Angular 5 SPA中呈现服务器端错误.
这是我到目前为止所做的,它的确有效 <mat-form-field class="col-6"> <input matInput formControlName="firstName"> <mat-error [hidden]="!form.controls.firstName.hasError('required')">This field is required and cannot be empty</mat-error> <mat-error [hidden]="!form.controls.firstName.hasError('other')">Some other error</mat-error> </mat-form-field> 表单的每个字段看起来都很相似.输入字段和下面的许多mat-error标记.单个输入字段附加了大量重复代码.此外,添加新的错误消息会导致在需要它的每个字段中添加它. 所以我想这样做 <mat-form-field class="col-6"> <input matInput formControlName="firstName"> <app-mat-errors [field]="form.controls.firstName"></app-map-errors> </mat-form-field> 并且在app-mat-errors组件模板中包含我们曾经在每个字段中使用的所有mat-error代码 <mat-error [hidden]="!field.hasError('required')">This field is required and cannot be empty</mat-error> <mat-error [hidden]="!field.hasError('other')">Some other error</mat-error> etc.... 使用这种方法,我遇到了正确渲染组件的问题. 当放入< app-mat-errors>时,< mat-error>标签嵌入在app-mat-errors标签中并且没有正确显示(即使没有错误,它们也不会始终显示和显示) 有没有什么方法角度可以渲染组件没有父标签?或者您有任何想法如何使其正常工作?提前致谢. 解决方法
< mat-error>元素需要是< mat-form-field>的直接子元素.为了正常工作,这是你发现的.所以你不能包装< mat-error>在另一个组件中使用该组件< mat-form-field>代替< mat-error>.
但是,您不需要在错误与< mat-error>之间建立一对一的关系.元素 – < mat-error>不是一个特殊的对象 – 它只是容器,其中< mat-form-field>显示错误内容.因此,您可以将错误逻辑放在一个组件中,并在单个< mat-error>中使用该组件.代替.这可能是这样的: 表单字段HTML: <mat-form-field class="col-6"> <input matInput formControlName="firstName"> <mat-error> <app-mat-errors [field]="form.controls.firstName"></app-map-errors> </mat-error> </mat-form-field> 错误组件模板: <ng-container *ngIf="field.hasError('required')">This field is required and cannot be empty</ng-container> <ng-container *ngIf="field.hasError('other')">Some other error</ng-container> etc.... 如果您的字段可能有多个错误,请务必在* ngIf逻辑中考虑该错误,以避免出现多条消息. 您可能还想考虑将逻辑实现为函数而不是作为组件,其中编写逻辑可能更容易: <mat-form-field class="col-6"> <input matInput formControlName="firstName"> <mat-error> {{getErrorMessage(form.controls.firstName)}} </mat-error> </mat-form-field> getErrorMessage(control: FormControl): string { if (control) { if (control.hasError('required')) return 'This field is required and cannot be empty'; if (control.hasError('other')) return 'Some other error'; // etc. } return ''; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |