angular - 无法投影s 到自定义组件中
问题描述
我有一个使用 Angular Material 的 Angular 8 应用程序。我正在尝试创建一个实现ControlValueAccessor
接口的可重用表单组件。它包含自己的具有两个控件的表单,如下所示:
<form [formGroup]="form">
<mat-form-field>
<mat-label>{{ nameLabel }}</mat-label>
<input
matInput
type="text"
formControlName="name"
[disabled]="disabled"
(blur)="onTouched()"/>
<ng-content select="[name-errors]"></ng-content>
</mat-form-field>
<mat-form-field>
<mat-label>{{ dateLabel }}</mat-label>
<input
matInput
[matDatepicker]="picker"
formControlName="plannedEnd"
[disabled]="disabled"
(blur)="onTouched()"
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<ng-content select="[date-errors]"></ng-content>
</mat-form-field>
</form>
及其打字稿:
import { ChangeDetectionStrategy, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormComponent, FormModel } from '@turntown/shared';
import * as moment from 'moment';
import { CreateScheduleReport } from '@turntown/cost-control/set-up/shared';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
@Component({
selector: 'cc-name-and-date',
templateUrl: './name-and-date.component.html',
styleUrls: ['./name-and-date.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NameAndDateComponent),
multi: true,
}],
})
export class NameAndDateComponent implements OnInit, FormComponent, ControlValueAccessor, OnDestroy {
@Input() nameLabel: string;
@Input() dateLabel: string;
private readonly unsubscribe$ = new Subject<void>();
disabled;
form;
onChange = (value: CreateScheduleReport) => {};
onTouched = () => {};
writeValue(newValue: CreateScheduleReport): void {
this.form.setValue(newValue);
this.onChange(newValue);
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}
constructor(protected formBuilder: FormBuilder) {
}
ngOnInit() {
this.form = this.initForm();
this.onChange(this.form.value);
this.form.valueChanges.pipe(
takeUntil(this.unsubscribe$),
).subscribe(newFormValue => {
this.onChange(newFormValue);
this.onTouched();
});
}
hasError(formControlName: string, error: string): boolean {
MomentDateAdapter
return this.form.get(formControlName).hasError(error) && this.form.get(formControlName).touched;
}
initForm(): FormGroup {
const form: FormModel<CreateScheduleReport> = {
name: [''],
plannedEnd: [moment()],
};
return this.formBuilder.group(form);
}
submitForm(event: any): void {
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
}
我正在使用这样的组件:
<form [formGroup]="form">
<section class="first-reporting-period-details">
<mat-card>
<h1>First reporting period details</h1>
<h3 tt-small>Planned end date of period</h3>
<cc-name-and-date
nameLabel="Period Name"
dateLabel="Period End Date"
formControlName="period">
<ng-container name-errors>
<mat-error *ngIf="hasError('period', 'invalidPeriodName')">
This is mandatory
</mat-error>
</ng-container>
<ng-container date-errors>
<mat-error *ngIf="hasError('period', 'invalidPeriodDate')">
The first reporting period end date must be today or later
</mat-error>
</ng-container>
</cc-name-and-date>
</mat-card>
</section>
<section class="first-stage-details">
<mat-card>
<h1>First stage details</h1>
<h3 tt-small>Planned end date of stage</h3>
<cc-name-and-date
nameLabel="Stage Name"
dateLabel="Stage End Date"
formControlName="stage">
<ng-container name-errors>
<mat-error *ngIf="hasError('stage', 'invalidStageName')">
This is mandatory
</mat-error>
</ng-container>
<ng-container date-errors>
<mat-error *ngIf="form.hasError('invalidStageDate')">
The first stage end date must be the same as the first reporting period end date or later
</mat-error>
</ng-container>
</cc-name-and-date>
</mat-card>
</section>
</form>
如您所见,我正在尝试在容器组件中执行验证逻辑,并尝试使用内容投影将错误传递给子组件。
所有这些逻辑都有效,但不幸的是,投射的错误无法在浏览器中正确呈现。当发生验证错误时,消息会在表单控件中呈现,如下所示:
这显然是不理想的,也是我老板不能接受的!我原以为这个问题会得到解决,因为它似乎是一个足够简单的模式,但我在 www 上找不到任何使用这种模式的示例。
我已经检查了 Chrome 中的 DOM,看起来<mat-error>
s 在投影时位于不同的位置,但我不知道为什么。任何人都可以帮忙吗?
解决方案
你有没有尝试把<ng-container>
里面<mat-error>
?我试图为自定义错误制作一个组件并像这样使用它
<mat-error>
<form-error [control]="formGroup.controls.type" field="Name"></form-error>
</mat-error>
推荐阅读
- python - 如何使用 Python 解码编码的电子邮件地址?
- node.js - 如何保存将命令的输出“npm run migrations”保存到变量中
- python - 无法在没有主键的情况下强制更新 save()
- python - 基于两个属性的 JSON 文件中的重复项
- node.js - Socket.io-redis 配置不起作用
- python - 这在技术上是列表理解吗?
- html - CSS Grid minmax with auto as min
- android - 夜间模式颜色值不适用于回收站视图项目
- python - CSS 文件(main.css)中的图像不使用 Flask 加载
- python - PermissionError:[Errno 13] 权限被拒绝:pyinstaller.exe/zipcodes windows 10